`

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

阅读更多
在页面中有多个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,将鼠标点进的文本框中然后按键盘的回车键,则页面自动进入百度页面: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.iteye.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> 
分享到:
评论
1 楼 像风一样拘束 2014-05-21  

相关推荐

    jsp表单验证汇总

    }}&lt;/script&gt;&lt;form name=a onsubmit="return test()"&gt;&lt;textarea name="b" cols="40" wrap="VIRTUAL" rows="6"&gt;&lt;/textarea&gt;&lt;input type="submit" name="Submit" value="check"&gt;&lt;/form&gt; 2. 只能是汉字 &lt;input onkeyup=...

    表单与javascript

    &lt;FORM name="form1" onSubmit="return validateform()" method="post" action="button.html" &gt; 名字: &lt;INPUT TYPE="text" id="txtName" NAME="txtName" size=10 onBlur="validateName();"&gt; 密码: &lt;INPUT TYPE=...

    js验证表单 js验证表单

    event.returnvalue=false; } &lt;input onkeydown="onlyEng();"&gt; 4. 只能是数字 &lt;script language=javascript&gt; function onlyNum() { if(!((event.keyCode&gt;=48&&event.keyCode&lt;=57)||(event.keyCode&gt;=96&&event....

    JS表单提交验证、input(type=number) 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑;注意点: 1、只有通过form里面的 &lt;button type="submit" &gt;提交&lt;/button&gt;进行表单的...

    JS两种类型的表单提交方法实例分析

    form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"&gt; &lt;button type="submit" class="button red" style="font-size:18px; font-family:'微软雅黑';"&gt;提 交&lt;/...

    regedit.jsp 表单注册用户名密码

    &lt;form name="form1" method="post" action="regeditIn.jsp" onSubmit="return on_submit()"&gt; 用户名: &lt;input type="text" name="username"/&gt; &lt;input type="button" name="Button" value="检测用户" onClick=...

    javaScript常用事件

    7.onSubmit事件:属于&lt;form&gt;表单元素,写在&lt;form&gt;表单标签内。语法:onSubmit=”return 函数名()” 8.onKeyDown事件:在输入框中按下键盘上的任何一个键时,都会触发事件,调用函数。注意:此事件写在方法的外面,且...

    搜索引擎名次查询.net版源码下载

    &lt;form name="form1" method="post" action="default.asp" style="margin:0px" onSubmit="return check();"&gt; &lt;table width="100%" border="0"&gt; &lt;td colspan="2"&gt; ...

    JavaScript中文参考手册

    这一章对应于使用表单,表单是出现在文档中用于从用户获得输入的。 Form 属性 方法 Hidden 属性 Text 属性 方法 Textarea 属性 方法 Password 属性 方法 FileUpload 属性 方法 Button 属性 方法 ...

    JavaScript语言参考手册

    这一章对应于使用表单,表单是出现在文档中用于从用户获得输入的。 Form 属性 方法 Hidden 属性 Text 属性 方法 Textarea 属性 方法 Password 属性 方法 FileUpload 属性 方法 Button 属性 方法 Submit 属性 方法 ...

Global site tag (gtag.js) - Google Analytics