防止表单自动提交，以及submit和button提交表单的区别

转自：http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/

防止表单自动提交，以及submit和button提交表单的区别   

2010-06-09 00:00:41 |  分类： JavaScript | 字号   订阅

(转)结：FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别

文章分类:JavaEye

在页面中有多个input type="text"的文本输入框的情况下没有问题，但是当页面中有只有一个文本框的情况下()，就会出现此问题. 

后来在form 中添加：onsubmit="return false;"问题终于解决。 

<form name="frm" method="post" onsubmit="return false;"> 

下边对“防止表单自动提交，以及submit和button提交表单”进行了些总结，希望对大家有些用（如果有不当的地方请指出）。 

Html代码 

1. < html >    
2. < script >    
3.   
4. function exec(p){   
5.     document.frm.action  =  p ;   
6.     document.frm.submit();   
7. }   
8. function exec1(p){   
9.     document.frm.action  =  p ;   
10.     document.frm.submit();   
11.     document.frm1.submit();//IE页面定位到最后一个提交的action所对应的页面   
12.     alert("haha");//submit()后边的语句正常执行，这里弹出框文字”haha“   
13. }   
14. </ script >    
15. < head >    
16. < h1 > 总结：FORM  onSubmit = "return false" 防止表单自动提交，以及submit和button提交表单的区别 </ h1 >    
17. < head >    
18. < body >    
19. <!-- （1） 下边的写法使得表单frm能够自动提交   
20. 下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com   
21. < form   name = 'frm'   action = "http://www.baidu.com" >    
22.     < input   type = "text"   name =  "userName" />    
23.     < input   type = "hidden"   name =  "userName1" />    
24. </ form >    
25.   
26. 注意：将上边的“< input   type = "hidden"   name =  "userName1" /> ”去掉或者增加上，都不能改变页面的自动提交！   
27. -->    
28.   
29. <!-- （2）而同样的写法，进行如上的操作，却不会提交   
30. 可能是有两个文本输入框的缘故吧（注意：上边仅有一个）。   
31. 那如果一个页面中有多个from会怎样？？后边有相关试验。   
32.   
33. < form   name = 'frm'   action = "http://www.baidu.com" >    
34.     < input   type = "text"   name =  "userName" />    
35.     < input   type = "text"   name =  "pass" />    
36. </ form >    
37. -->    
38.   
39. <!-- （3）下面试试，同一个页面有多个from的情况   
40. 这里先试试多个form、每个form中仅有一个文本输入框   
41. < form   name = 'frm1'   action = "http://www.baidu.com" >    
42.     < input   type = "text"   name =  "userName" />    
43.     < input   type = "hidden"   name =  "userName1" />    
44. </ form >    
45. < form   name = 'frm2'   action = "http://www.google.cn/" >    
46.     < input   type = "text"   name =  "userName" />    
47. </ form >    
48. 经试验，每个from中的文本输入框都具有自动提交的能力。   
49. -->    
50.   
51.   
52. <!-- （4）下面试试，同一个页面有多个from的情况   
53. 这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框   
54. < form   name = 'frm1'   action = "http://www.baidu.com" >    
55.     < input   type = "text"   name =  "userName" />    
56.     < input   type = "text"   name =  "passWord" />    
57. </ form >    
58. < form   name = 'frm2'   action = "http://www.google.cn" >    
59.     < input   type = "text"   name =  "userName" />    
60. </ form >    
61. < form   name = 'frm3'   action = "http://www.yahoo.com" >    
62.     < input   type = "text"   name =  "userName" />    
63.     < input   type = "text"   name =  "passWord" />    
64. </ form >    
65. 经试验，只有 frm2 具有自动提交的特性。   
66.   
67. 看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。   
68. -->    
69. <!--（5）如何防止页面自动提交？！   
70. 很简单！只要在from 中加上 onSubmit = "return false;" 就OK了！   
71. < form   name = 'frm1'   action = "http://www.baidu.com" >    
72.     < input   type = "text"   name =  "userName" />    
73.     < input   type = "text"   name =  "passWord" />    
74. </ form >    
75. < form   name = 'frm2'   action = "http://www.google.cn"   onSubmit = "return false;" >    
76.     < input   type = "text"   name =  "userName" />    
77. </ form >    
78.   
79. 呵呵，经过onSubmit = "return false;"  改造后，frm2不再自动提交了！   
80. -->    
81. <!--（6）下边看看input type = "submit" 对提交表单的影响   
82.   
83. 这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit = "return false;"  ，它是自动提交的)   
84. < form   name = 'frm1'   action = "http://www.baidu.com" >    
85.     < input   type = "text"   name =  "userName" />    
86.     < input   type = "text"   name =  "passWord" />    
87.     < input   type = "submit"   value = "提交1" />    
88. </ form >    
89. < form   name = 'frm2'   action = "http://www.google.com" >    
90.     < input   type = "text"   name =  "userName" />    
91.     < input   type = "text"   name =  "passWord" />    
92.     < input   type = "submit"   value = "提交2" />    
93. </ form >    
94. 则，分别鼠标点击frm1、frm2中的文本框并按回车后，会根据各自的action来进入不同的页面   
95. -->    
96. <!--（7）下边看看input type = "button" 对提交表单的影响   
97. < form   name = 'frm1'   action = "http://www.baidu.com" >    
98.     < input   type = "text"   name =  "userName" />    
99.     < input   type = "text"   name =  "passWord" />    
100.     < input   type = "button"   value = "提交1" />    
101. </ form >    
102. < form   name = 'frm2'   action = "http://www.google.com" >    
103.     < input   type = "text"   name =  "userName" />    
104.     < input   type = "text"   name =  "passWord" />    
105.     < input   type = "button"   value = "提交2" />    
106. </ form >    
107.   
108. 哈哈，分别鼠标点击frm1、frm2中的文本框并按回车后，都没有反应！看来button这样是不能提交表单的   
109. -->    
110.   
111. <!--（8）使用 "button" 来提交表单   
112.   
113. < form   name = 'frm'   action = "http://www.baidu.com" >    
114.     < input   type = "text"   name =  "userName" />    
115.     < input   type = "text"   name =  "" />    
116.     < input   type = "button"   value = "提交1"   onclick = "exec('http://www.google.com')" />    
117. </ form >    
118.   
119. userName 、passWord处都填写数据，点击button。   
120. OK！连上google了，IE地址栏显示：http://www.google.com/?userName = 1passWord =1   
121. -->    
122. <!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释     
123.  
124. -->    
125. < form   name = 'frm'   action = "http://www.google.com" >    
126.     < input   type = "text"   name =  "userName" />    
127.     < input   type = "text"   name =  "passWord" />    
128.     < input   type = "button"   value = "提交1"   onclick = "exec1('http://www.google.com')" />    
129. </ form >    
130. < form   name = 'frm1'   action = "http://www.hao123.com" >    
131.     < input   type = "text"   name =  "userName" />    
132. </ form >    
133.   
134. </ body >    
135. </ html >    

总结期间找了些关于onsubmit="return false;"的文章，作为资料也贴在下边。 

URL：http://bbsanwei.javaeye.com/blog/271547 

onSubmit的使用 
在web开发中，我们经常会遇到，一点回车键表单就自己提交的问题，能不能禁用回车键呢，答案是肯定的. 


Html代码 
<from action="" method="post" onSubmit="return false">   
...............    
</from>  


如果想在表单提交时，进行验证 

Html代码 
<html>   
<head>   
<script lanuage="javascript">   
function check()    
{    
//验证不通过时    
return false;    
}    
</script>   
</head>   
<body>   
<from action="" method="post" onSubmit="return check()">   
...............    
</from>   
</body>   
</html>  

<html> 
<head> 
<script lanuage="javascript"> 
function check() 
{ 
//验证不通过时 
return false; 
} 
</script> 
</head> 
<body> 
<from action="" method="post" onSubmit="return check()"> 
............... 
</from> 
</body> 
</html> 


这样就会对表单进行验证再进行提交 

要注意的是，千万不能写成 

Html代码 
<from action="" method="post" onSubmit="check()">   
...............    
</from>  


因为check()不通过后会返回false， 因为onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true，所以还是相当于验证通过 
记得对表单验证一定要写成这样 

Html代码 
<from action="" method="post" onSubmit="return check()">   
...............    
</from>