当前位置： 移动技术网 > IT编程>网页制作>CSS > FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别

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

2018年08月27日  | 移动技术网IT编程  | 我要评论

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

 

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

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

 

 

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

<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，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：
<form name='frm'  action=""> 
    <input type="text" name= "username"/>
    <input type="hidden" name= "username1"/>
</form>

注意：将上边的“<input type="hidden" name= "username1"/>”去掉或者增加上，都不能改变页面的自动提交！
-->

<!-- （2）而同样的写法，进行如上的操作，却不会提交
可能是有两个文本输入框的缘故吧（注意：上边仅有一个）。
那如果一个页面中有多个from会怎样？？后边有相关试验。

<form name='frm'  action=""> 
    <input type="text" name= "username"/>
    <input type="text" name= "pass"/>
</form>
-->

<!-- （3）下面试试，同一个页面有多个from的情况
 这里先试试多个form、每个form中仅有一个文本输入框
<form name='frm1' action=""> 
    <input type="text" name= "username"/>
    <input type="hidden" name= "username1"/>
</form>
<form name='frm2'  action=""> 
    <input type="text" name= "username"/>
</form>
经试验，每个from中的文本输入框都具有自动提交的能力。
-->

 

<!-- （4）下面试试，同一个页面有多个from的情况
 这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框
<form name='frm1' action=""> 
    <input type="text" name= "username"/>
    <input type="text" name= "password"/>
</form>
<form name='frm2' action=""> 
    <input type="text" name= "username"/>
</form>
<form name='frm3' action=""> 
    <input type="text" name= "username"/>
    <input type="text" name= "password"/>
</form>
经试验，只有 frm2 具有自动提交的特性。

看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。
-->
<!--（5）如何防止页面自动提交？！
很简单！只要在from 中加上 onsubmit="return false;"就ok了！
<form name='frm1' action=""> 
    <input type="text" name= "username"/>
    <input type="text" name= "password"/>
</form>
<form name='frm2' action=""  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="">
    <input type="text" name= "username"/>
    <input type="text" name= "password"/>
    <input type="submit"  value="提交1"/>
</form>
<form name='frm2' action="">
    <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="">
    <input type="text" name= "username"/>
    <input type="text" name= "password"/>
    <input type="button"  value="提交1"/>
</form>
<form name='frm2' action="">
    <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="">
    <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地址栏显示：
-->
<!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释   

-->
<form name='frm' action="">
    <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="">
    <input type="text" name= "username"/>
</form>

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

url：

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网