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提交表单”进行了些总结,希望对大家有些用(如果有不当的地方请指出)。
< 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>