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

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
5. <title>防止重复表单提交</title> 
6. <style> 
7. #refresh{ 
8. display: none; 
9. width:200px; 
10. height:20px; 
11. background-color: #ff0; 
12.  
13. } 
14.  
15. </style> 
16.  
17. <script> 
18. var inprocess = false; 
19. window.onload = function(){ 
20.  
21. document.forms["picker"].onsubmit = validateSubmit; 
22. document.getElementById("refresh").onclick = startOver; 
23. } 
24. function validateSubmit () { 
25. // 防止重复的表单提交 
26. if (inprocess) return; 
27. inprocess = true; 
28. console.log(inprocess); 
29. document.getElementById("submitbutton").disabled = true; 
30.  
31. document.getElementById("refresh").style.display = "block"; 
32. document.getElementById("message").innerHTML = "<p>正在processing，稍等</p>"; 
33. return false; 
34. } 
35. function startOver(){ 
36. inprocess = false; 
37. document.getElementById("submitbutton").disabled = false; 
38. document.getElementById("message").innerHTML = ""; 
39. document.getElementById("refresh").style.display = "none"; 
40.  
41. } 
42. </script> 
43. </head> 
44.  
45. <body> 
46.  
47. <form id="picker" method="post" action=""> 
48. group1:<input type="radio" name="group1" value="one" /> 
49. group2:<input type="radio" name="group1" value="two" /> 
50. group3:<input type="radio" name="group1" value="three" /><br /><br /> 
51. Input 1: <input type="text" id="intext" /> 
52. Input 2: <input type="text" id="intext2" /> 
53. Input 3: <input type="text" id="intext3" /> 
54. <input type="submit" id="submitbutton" value="send form" /> 
55. </form> 
56. <div id="refresh"> 
57. <p>单击我</p> 
58. </div> 
59. <div id="message"></div> 
60. </body> 
61. </html>