信鸽网

一个JavaScript防止表单重复提交的实例

  作者：bea

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>防止重复表单提交</title> <style> #refresh{ display: none; width:200px; height:20px; background-co 


<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>防止重复表单提交</title> 

<style> 

#refresh{ 

display: none; 

width:200px; 

height:20px; 

background-color: #ff0; 



} 



</style> 



<script> 

var inprocess = false; 

window.onload = function(){ 



document.forms["picker"].onsubmit = validateSubmit; 

document.getElementById("refresh").onclick = startOver; 

} 

function validateSubmit () { 

// 防止重复的表单提交 

if (inprocess) return; 

inprocess = true; 

console.log(inprocess); 

document.getElementById("submitbutton").disabled = true; 



document.getElementById("refresh").style.display = "block"; 

document.getElementById("message").innerHTML = "<p>正在processing，稍等</p>"; 

return false; 

} 

function startOver(){ 

inprocess = false; 

document.getElementById("submitbutton").disabled = false; 

document.getElementById("message").innerHTML = ""; 

document.getElementById("refresh").style.display = "none"; 



} 

</script> 

</head> 



<body> 



<form id="picker" method="post" action=""> 

group1:<input type="radio" name="group1" value="one" /> 

group2:<input type="radio" name="group1" value="two" /> 

group3:<input type="radio" name="group1" value="three" /><br /><br /> 

Input 1: <input type="text" id="intext" /> 

Input 2: <input type="text" id="intext2" /> 

Input 3: <input type="text" id="intext3" /> 

<input type="submit" id="submitbutton" value="send form" /> 

</form> 

<div id="refresh"> 

<p>单击我</p> 

</div> 

<div id="message"></div> 

</body> 

</html>




有用  |  无用

猜你喜欢

您可能感兴趣的文章: