随笔- 1793 文章- 1 评论- 61 阅读- 298万

Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

< html >    
< script >    
   
function exec(p){   
    document.frm.action  =  p ;   
    document.frm.submit();   
}   
function exec1(p){   
    document.frm.action  =  p ;   
    document.frm.submit();   
    document.frm1.submit();//IE页面定位到最后一个提交的action所对应的页面   
    alert("haha");//submit()后边的语句正常执行，这里弹出框文字”haha“   
}   
</ script >    
< head >    
< h1 > 总结：FORM  onSubmit = "return false" 防止表单自动提交，以及submit和button提交表单的区别 </ h1 >    
< head >    
< body >    
<!-- （1） 下边的写法使得表单frm能够自动提交   
下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com   
< form   name = 'frm'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "hidden"   name =  "userName1" />    
</ form >    
   
注意：将上边的“< input   type = "hidden"   name =  "userName1" /> ”去掉或者增加上，都不能改变页面的自动提交！   
-->   
   
<!-- （2）而同样的写法，进行如上的操作，却不会提交   
可能是有两个文本输入框的缘故吧（注意：上边仅有一个）。   
那如果一个页面中有多个from会怎样？？后边有相关试验。   
   
< form   name = 'frm'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "pass" />    
</ form >    
-->   
   
<!-- （3）下面试试，同一个页面有多个from的情况   
这里先试试多个form、每个form中仅有一个文本输入框   
< form   name = 'frm1'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "hidden"   name =  "userName1" />    
</ form >    
< form   name = 'frm2'   action = "http://www.google.cn/" >    
    < input   type = "text"   name =  "userName" />    
</ form >    
经试验，每个from中的文本输入框都具有自动提交的能力。   
-->   
   
   
<!-- （4）下面试试，同一个页面有多个from的情况   
这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框   
< form   name = 'frm1'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
</ form >    
< form   name = 'frm2'   action = "http://www.google.cn" >    
    < input   type = "text"   name =  "userName" />    
</ form >    
< form   name = 'frm3'   action = "http://www.yahoo.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
</ form >    
经试验，只有 frm2 具有自动提交的特性。   
   
看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。   
-->   
<!--（5）如何防止页面自动提交？！   
很简单！只要在from 中加上 onSubmit = "return false;" 就OK了！   
< form   name = 'frm1'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
</ form >    
< form   name = 'frm2'   action = "http://www.google.cn"   onSubmit = "return false;" >    
    < input   type = "text"   name =  "userName" />    
</ form >    
   
呵呵，经过onSubmit = "return false;"  改造后，frm2不再自动提交了！   
-->   
<!--（6）下边看看input type = "submit" 对提交表单的影响   
   
这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit = "return false;"  ，它是自动提交的)   
< form   name = 'frm1'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
    < input   type = "submit"   value = "提交1" />    
</ form >    
< form   name = 'frm2'   action = "http://www.google.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
    < input   type = "submit"   value = "提交2" />    
</ form >    
则，分别鼠标点击frm1、frm2中的文本框并按回车后，会根据各自的action来进入不同的页面   
-->   
<!--（7）下边看看input type = "button" 对提交表单的影响   
< form   name = 'frm1'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
    < input   type = "button"   value = "提交1" />    
</ form >    
< form   name = 'frm2'   action = "http://www.google.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
    < input   type = "button"   value = "提交2" />    
</ form >    
   
哈哈，分别鼠标点击frm1、frm2中的文本框并按回车后，都没有反应！看来button这样是不能提交表单的   
-->   
   
<!--（8）使用 "button" 来提交表单   
   
< form   name = 'frm'   action = "http://www.baidu.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "" />    
    < input   type = "button"   value = "提交1"   onclick = "exec('http://www.google.com')" />    
</ form >    
   
userName 、passWord处都填写数据，点击button。   
OK！连上google了，IE地址栏显示：http://www.google.com/?userName = 1passWord =1   
-->   
<!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释     
  
-->   
< form   name = 'frm'   action = "http://www.google.com" >    
    < input   type = "text"   name =  "userName" />    
    < input   type = "text"   name =  "passWord" />    
    < input   type = "button"   value = "提交1"   onclick = "exec1('http://www.google.com')" />    
</ form >    
< form   name = 'frm1'   action = "http://www.hao123.com" >    
    < input   type = "text"   name =  "userName" />    
</ form >    
   
</ body >    
</ 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>