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

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

 

后来在form 中添加:οnsubmit="return false;"问题终于解决。

<form name="frm"  method="post" οnsubmit="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,将鼠标点进的文本框中然后按键盘的回车键,则页面自动进入百度页面: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" οnclick="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" οnclick="exec1('http://www.google.com')"/> 
</form> 
<form name='frm1' action="http://www.hao123.com"> 
    <input type="text" name= "userName"/> 
</form>

</body> 
</html>
总结期间找了些关于οnsubmit="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>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值