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

总结:form中使用onSubmit=

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

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

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

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

­

­

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

­ ­

­

­

(1) 下边的写法使得表单form能够自动提交 ­

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

­

­

­

­

­注意:将上边的“”去掉或者增加上,也不能改变页面的自动提交! ­

­(2)而同样的写法,进行如上的操作,却不会提交 ­

可能是有两个文本输入框的缘故(注意:上边仅有一个)。 ­

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

­

­

­

­

­

­

(3)下面试试,同一个页面有多个form的情况 ­

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

­

­

­

­

­

­

­

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

(4)下面试试,同一个页面有多个form的情况 ­

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

­

­

­

­

­

­

­

­

­

­

­

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

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

(5)如何防止页面自动提交?! ­

很简单!只要在form 中加上 onSubmit="return false;"就OK了! ­

­

­

­

­

­

­

­

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

(6)下边看看input type="submit"对提交表单的影响­

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

­

­

­

­

­

­

­

­

­

­

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

(7)下边看看input type="button"对提交表单的影响 ­

­

­

­

­

­

­

­

­

­

­

­

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

(8)使用 "button" 来提交表单­

­

­

­

­

­

­

­

userName 、passWord处都填写数据,点击button。 ­

OK!连上google了,IE地址栏显示:http://www.google.com/?userName=1passWord=1 ­

(9)使用 "button" 来提交表单——参考js exec1()中的相关注释 ­

­

­

­

­

­

­

­

­

­

­

关于onsubmit="return false;"。­

­onSubmit的使用 ­

在web开发中,我们经常会遇到,一点回车键表单就自己提交的问题,能不能"禁用"回车键呢,答案是肯定的.­

Html代码 ­

­

............... ­

­

­如果想在表单提交时,进行验证­

Html代码 ­

­

­

­

­

­

­

............... ­

­

­

­

­

­

­

­

­

­

­

............... ­

­

­

­

­­这样就会对表单进行验证再进行提交­

要注意的是,千万不能写成­

­Html代码 ­

­

............... ­

­

­因为check()不通过后会返回false, 因为onsubmit属性就像是

这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true,所以还是相当于验证通过 ­

记得对表单验证一定要写成这样­

­Html代码 ­

­

............... ­

相关推荐

宝可梦朱紫呆呆王怎么进化
365app手机版官方

宝可梦朱紫呆呆王怎么进化

📅 07-01 👁️ 196
天龙八部最新区 天龙八部最近开的新区
beat365在线体育打不开

天龙八部最新区 天龙八部最近开的新区

📅 08-08 👁️ 7925
信美分期问题
beat365在线体育打不开

信美分期问题

📅 07-08 👁️ 3653
拍拍贷最后一期不还会怎么样
bt365体育网址

拍拍贷最后一期不还会怎么样

📅 07-26 👁️ 7191
天谕神格系统讲解及使用方法介绍
bt365体育网址

天谕神格系统讲解及使用方法介绍

📅 07-02 👁️ 2972
珍爱网工资
365app手机版官方

珍爱网工资

📅 07-28 👁️ 6594
《原神绯红玉髓采集指南》
bt365体育网址

《原神绯红玉髓采集指南》

📅 08-14 👁️ 9646
如何恢复U盘误删文件
bt365体育网址

如何恢复U盘误删文件

📅 07-12 👁️ 4697
相关文章
365app手机版官方

相关文章

📅 08-19 👁️ 5667