转载于  ：https://zhidao.baidu.com/question/619375120140398412.html

在页面中有多个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>

alert警告框点击确定后自动提交表单的更多相关文章

  1. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

  2. java 传入用户名和密码并自动提交表单实现登录到其他系统

    不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import ...

  3. ssi-uploader上传图片插件，点击选择文件按钮自动提交表单解决办法

    先介绍一下这款插件,然后再谈使用中可能遇到的问题 ssi-uploader是一个JQuery的图片上传插件,界面比较美观 github地址:https://github.com/ssbeefeater ...

  4. 按钮特效-Enter键自动提交表单

    —————————————————————— <script type="text/javascript">                        //当用户按 ...

  5. 前端表单中有按钮button自动提交表单

    问题描述 在设计表单时,表单内有一个按钮<button>,该按钮是用来获取其他数据或执行其他操作的.并不是让他提交表单. 解决方案 1) 设置 form 的 onsubmit='retur ...

  6. JS倒计时，自动提交表单!

    <form id="frm" action="http://www.baidu.com"> 考试还剩余<div id="time&q ...

  7. <button>会自动提交表单吗？

    点击button以后,表单先由ajax提交,然后无论后台返回什么结果,页面都会跳转到表单action属性指定的路劲,也就是login.html使用的是html.jquery.javascript,后台 ...

  8. javascripts 实习自动提交表单 onsubmit

    html: <form id="formwb" onsubmit="return setPassword();"> <script> d ...

  9. HTML页面禁用Enter键自动提交表单

    今天在开发页面时,遇到一个小BUG,,如下图 在页面的文本框获取焦点之后,再按键盘上的Enter键,页面form就会自动提交.如下是页面禁止Enter自动提交代码: document.onkeydow ...

随机推荐

  1. 风变编程笔记(一)-Python基础语法

    第0关  print()函数与变量 1. print()函数print()函数:告诉计算机,把括号的内容显示在屏幕上 # 不带引号 print(1+1) # 让计算机读懂括号里的内容,打印最终的结果 ...

  2. Python元组详解

    元组的特征 元组类型的名字是tuple 元组的一级元素不可被修改.不能增加或者删除: 元组和列表的书写区别是将中括号改成了小括号: 为方便区分元组和普通方法的参数,一般在元组的最后一个元素后保持加一个 ...

  3. Laradock + tp5 + nginx 配置虚拟机域名始终跳转首页/502报错

    laradock默认配置文件如下: 配置运用于本地windows+phpstudy 部署的laravel项目未出现问题,如下: server { listen ; listen [::]:; serv ...

  4. [转]shallow heap & retained heap

    所有包含Heap Profling功能的工具(MAT, Yourkit, JProfiler, TPTP等)都会使用到两个名词,一个是Shallow Size,另一个是 Retained Size.  ...

  5. numpy 中array 和ndrray的区别联系

    numpy.array()  标明array只是一个方法 ndarray 是类名,是一个实例. a=numpy.array(b)    #这是把变量b转换为数组a,这里array()是个方法,a的类型 ...

  6. javascript闭包的理解和实例

    所谓闭包,值得是词法表示包括不必要计算的变量的函数,也就是说,该函数可以使用函数外定义的变量. 顺便提示一下: 词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通 ...

  7. 《NVMe-over-Fabrics-1_0a-2018.07.23-Ratified》阅读笔记（3）-- 命令

    3 命令 Fabrics命令用于创建队列和初始化controller.Fabrics命令的Opcode字段填写0x7F.无论controller是否处于使能状态(CC.EN)Fabrics命令都会被处 ...

  8. 爬取杭电oj所有题目

    杭电oj并没有反爬 所以直接爬就好了 直接贴源码(参数可改,循环次数可改,存储路径可改) import requests from bs4 import BeautifulSoup import ti ...

  9. Map中放入对象字符串转义问题

    在做Zuul网关日志处理的时候,有以下需求: (1)记录请求成功的日志,要求记录请求返回的结果. 遇到的问题: (1)当请求的结果事对象时,会将其转成字符串,在put进map的时候,字符串就会被转义 ...

  10. FPM 0.08不能运行破解办法……

    FPM_0.080.rar 破解办法:用UltraEdit打开FPM.exe,查找"33 C0 E9 F2"(注意中间有空格)将33改为8B,F2改为00