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

最新推荐文章于 2022-02-20 22:05:42 发布

无名1949

最新推荐文章于 2022-02-20 22:05:42 发布

阅读量822

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

14 篇文章

订阅专栏

本文详细探讨了HTML表单自动提交的问题，特别是针对只有一个文本输入框的表单，并提出了解决方案，即通过onSubmit=return false;阻止自动提交。此外，还对比了submit与button提交表单的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

下边对“防止表单自动提交，以及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>