最近看书对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> ­

<!--后面例子中要用到的js函数-->

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

为了您的安全，请只打开来源可靠的网址

打开网站    取消

来自: http://hi.baidu.com/oysterliu/blog/item/eafe202b77a4b1325243c1d6.html

总结：form中使用onSubmit=return false防止表单自动提交，以及s...相关推荐

  1. vue中阻止表单自动提交

    有时候我们在用vue项目时,肯定会遇到这样的问题,业务中需要用到form,但是点击提交按钮会触发form的默认提交,如果用在form上绑定return false,需要单独写验证函数和接收到数据后对数 ...

  2. Form表单自动提交

    表单提交是提交到指定的地址. 知识点:                1.创建一个项目,引入需要用到的CSS.JS.jQuery文件.既然是表单就会使用栅格布局. 2.栅格布局就要使用到contain ...

  3. ajax form表单提交_开发日志：金数据表单自动提交脚本

    最近学校要求我们每天通过一个在线表单打卡自己在家做的体育课项目,在提交的时候我突然想了下如果能有一个自动的系统每天帮我自动打卡岂不是能省很多时间?而且我一直很想学Python的网络爬虫以及服务器后端的 ...

  4. antd vue form 手动校验_jsonschema-form-vue基于JSONSchema的表单自动生成方案

    现象 作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作: 编写模板 编写校验规则 * 获取数据,提交表单 同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后 ...

  5. 表单onsubmit事件无效以及表单onsubmit使用ajax无效解决

    [推荐]2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 今天在做登陆页面,想法是这样的: 前台提交表单给后台,如果用户名密码不正确,就提示用户用户名密码不对,并不跳转 ...

  6. 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...

  7. 表单提交 onsubmit=return false

    一般,后台程序员与表单打交道的时间是最多的. 最近在看老师考试系统的源码, 看到了有这么一段代码,当时不是很理解, google寻求帮助. 现在来总结一下. <form action=" ...

  8. 使用ajax方法实现form表单的提交

    2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...

  9. 前后端交互之使用ajax方法实现form表单的提交

    转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com)  οnsubmit="reutrn false":表示禁止表单提交. dat ...

  10. 使用ajax方法实现form表单的提交（Ajax和from提交的区别）

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

最新文章

  1. opencv和python是什么关系_opencv和python的区别
  2. 雅虎公司C#笔试题，看看你能解答多少? [含答案]
  3. 打印包含在 boost::exception 中的所有数据的测试程序
  4. 文字在状态栏上从右往左显示，而且是循环的
  5. mysql 实现计数器_MySQL实现计数器的表设计及实现
  6. HUAWEI HiAI 3.0 分布式，瑜伽、开车还能这么玩......
  7. 不做etl sql 怎么直接取_我们可以不再使用ETL了吗？
  8. 今天开始用 VSU 2010
  9. 10个经典Python爬虫入门实例！你还不知道吗
  10. 数据结构——线性链表/单链表设计
  11. urllib库（三）parse模块：quote()/quote_plus()，unquote()/unquote_plus()，quote_from_bytes()
  12. HHUOJ 1001 汽水瓶 （水题）
  13. Android Edittext 手机号码格式输入设置
  14. Harmonious Army
  15. [2021 蓝帽杯]杰克与肉丝
  16. 网络请求urllib库使用总结
  17. 水流强度指数（SPI）地形湿度指数（TWI）计算
  18. Mock.js有什么用
  19. python线程和进程
  20. 北邮计算机学院孙岩,孙岩（博导）-北京邮电大学 计算机学院（国家示范性软件学院）...

热门文章

  1. VeraCrypt磁盘加密软件
  2. 换IP工具派克斯和PPTP的区别
  3. 【安装】安装OpenCV简易教程
  4. 银行联行号cnasp查询（二）
  5. MyBatis缓存机制详解
  6. 个人游戏开发者是如何盈利
  7. 微商推广引流秘笈—— 8 个高效的引流策略
  8. 电子病历设计基本资料
  9. 智能家居系统的总线系统和无线系统的具体介绍
  10. 优麒麟19.1安装HP扫描仪驱动