submit和button提交表单区别与总结

最新推荐文章于 2022-03-10 08:53:25 发布

yboker

最新推荐文章于 2022-03-10 08:53:25 发布

阅读量1.4k

点赞数

分类专栏： javaScript 文章标签： button submit 区别总结表单

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近看书对form中οnsubmit="return false;"不明白。现在知道了那样做是要防止表单的自动提交。

下面这篇文章总结的非常全,自己就直接拿过来修改总结了。

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

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

<form name="form1" method="post" οnsubmit="return false;">

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

<head>

<script>

function exec(p){

document.form2.action = p;

document.form2.submit();

}

function exec1(p){

document.form2.action = p;

document.form2.submit();

document.form1.submit();//IE页面定位到最后一个提交的action所对应的页面

alert("Hello!Oyster");//submit()后边的语句正常执行，这里弹出框文字”Hello!Oyster“

}

</script>



</head>

（1）下边的写法使得表单form能够自动提交

下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="hidden" name= "Password1"/>

</form>

注意：将上边的“<input type="hidden" name= "userName1"/>”去掉或者增加上，也不能改变页面的自动提交！

（2）而同样的写法，进行如上的操作，却不会提交

可能是有两个文本输入框的缘故（注意：上边仅有一个）。

那如果一个页面中有多个from会怎样？？后边有相关试验。

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="text" name= "Password1"/>

</form>

（3）下面试试，同一个页面有多个from的情况

这里先试试多个form、每个form中仅有一个文本输入框

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="hidden" name= "Password1"/>

</form>

<form name='form2' action="http://www.google.cn/">

<input type="text" name= "UserName2"/>

</form>

经试验，每个from在只有1个文本输入框都具有自动提交的能力。

（4）下面试试，同一个页面有多个from的情况

这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="text" name= "Password1"/>

</form>

<form name='form2' action="http://www.google.cn">

<input type="text" name= "UserName2"/>

</form>

<form name='form3' action="http://www.yahoo.com">

<input type="text" name= "UserName3"/>

<input type="text" name= "Password3"/>

</form>

经试验，只有 form2 具有自动提交的特性。

看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。

（5）如何防止页面自动提交？！

很简单！只要在from 中加上 onSubmit="return false;"就OK了！

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="text" name= "Password1"/>

</form>

<form name='from2' action="http://www.google.cn" onSubmit="return false;">

<input type="text" name= "UserName2"/>

</form>

呵呵，经过onSubmit="return false;" 改造后，form2不再自动提交了！

（6）下边看看input type="submit"对提交表单的影响

这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit="return false;" ，它是自动提交的)

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "UserName1"/>

<input type="text" name= "Password1"/>

<input type="submit" value="提交1"/>

</form>

<form name='form2' action="http://www.google.com">

<input type="text" name= "UserName2"/>

<input type="text" name= "Password2"/>

<input type="submit" value="提交2"/>

</form>

则，分别鼠标点击form1、form2中的文本框并按回车后，会根据各自的action来进入不同的页面

（7）下边看看input type="button"对提交表单的影响

<form name='form1' action="http://www.baidu.com">

<input type="text" name= "Username1"/>

<input type="text" name= "Password1"/>

<input type="button" value="提交1"/>

</form>

<form name='form2' action="http://www.google.com">

<input type="text" name= "UserName2"/>

<input type="text" name= "PassWord2"/>

<input type="button" value="提交2"/>

</form>

哈哈，分别鼠标点击form1、form2中的文本框并按回车后，都没有反应！看来button这样是不能提交表单的

（8）使用 "button" 来提交表单

<form name="form1" action="http://www.baidu.com">

<input type="text" name= "userName1"/>

<input type="text" name= "password1"/>

<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='form' action="http://www.google.com">

<input type="text" name= "userName1"/>

<input type="text" name= "passWord1"/>

<input type="button" value="提交1" οnclick="exec1('http://www.google.com')"/>

</form>

<form name='form1' action="http://www.hao123.com">

<input type="text" name= "userName"/>

</form>

</body>

</html>

关于οnsubmit="return false;"。

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>

yboker

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
submit和button提交表单区别与总结

最近看书对form中onsubmit="return false;"不明白。现在知道了那样做是要防止表单的自动提交。下面这篇文章总结的非常全,自己就直接拿过来修改总结了。自动提交在页面form中有多个input type="text"的文本输入框的情况下没有问题，但是当页面中有只有一个文本框的情况下()，就会出现此问题.后来在form 中添加：onsubmit="retur
复制链接

扫一扫

专栏目录