防止表单自动交付，以及submit和button提交表单的区别

2012-08-30

防止表单自动提交，以及submit和button提交表单的区别下边对“防止表单自动提交，以及submit和button提交表单

防止表单自动提交，以及submit和button提交表单的区别

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

<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>

热点排行

Web前端

防止表单自动交付，以及submit和button提交表单的区别