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

最新推荐文章于 2022-02-20 22:05:42 发布

最新推荐文章于 2022-02-20 22:05:42 发布 · 132 阅读

文章标签：

#javascript #ViewUI

本文探讨了HTML表单自动提交的现象及其原因，并介绍了如何通过在form标签中添加onsubmit=return false;来阻止自动提交。同时，还对比了submit与button在提交表单时的不同表现。

今天在实现业务的时候，jsp页面总是自动提交。

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

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

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

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

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

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

 
 onSubmit的使用
在web开发中，我们经常会遇到，一点回车键表单就自己提交的问题，能不能禁用回车键呢，答案是肯定的.
Html代码
 <fromaction=""method="post"onSubmit="returnfalse"> 
...............
 </from> 
如果想在表单提交时，进行验证
Html代码
 <html> 
 <head> 
 <scriptlanuage="javascript"> 
functioncheck()
{
//验证不通过时
returnfalse;
}
 </script> 
 </head> 
 <body> 
 <fromaction=""method="post"onSubmit="returncheck()"> 
...............
 </from> 
 </body> 
 </html> 
 <html> 
 <head> 
 <scriptlanuage="javascript"> 
functioncheck()
{
//验证不通过时
returnfalse;
}
 </script> 
 </head> 
 <body> 
 <fromaction=""method="post"onSubmit="returncheck()"> 
...............
 </from> 
 </body> 
 </html> 
这样就会对表单进行验证再进行提交
要注意的是，千万不能写成
Html代码
 <fromaction=""method="post"onSubmit="check()"> 
...............
 </from> 
因为check()不通过后会返回false，因为onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true，所以还是相当于验证通过
记得对表单验证一定要写成这样
Html代码
 <fromaction=""method="post"onSubmit="returncheck()"> 
...............
 </from> 