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

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

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

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

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

FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别的更多相关文章

  1. Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  2. ASP.NET里面，如果设置了form的 onsubmit="return false;"之后，就不能提交按钮了？

    我的按钮是写成的服务器控件的形式<asp:Button ID="btnSubmitBR" runat="server" Text="提交&quo ...

  3. onsubmit="return false;"报错

    <form id="formpersonal" method="post" onsubmit="return false;">. ...

  4. onsubmit return false仍提交表单

    博主之前遇到这样的问题,是因为代码有错,改正之后就正常了. 但今天确定代码没错,仍然return false提交表单. 总结网上各路大神的解释: 1.onsubmit的作用是防止form只有一个inp ...

  5. 原生js中stopPropagation,preventDefault,return false的区别

    1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div") ...

  6. JavaScript中function 之return false的理解(实例代码)

    1.司空见惯代码,在某一dom节点上注册事件方法 $("#btnResponse").click(Login); $("#txtCode").keydown(R ...

  7. 在javascript中关于submit和button提交表单区别

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...

  8. （转）在javascript中关于submit和button提交表单区别

      原文来自:http://www.jb51.net/article/42236.htm   submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和b ...

  9. submit和button提交表单的区别

    <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. [转载]java开发中的23种设计模式

    原文链接:http://blog.csdn.net/zhangerqing 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反 ...

  2. Python系列之——利用Python实现微博监控

    0x00 前言: 前几个星期在写一个微博监控系统 可谓是一波三折啊 获取到微博后因为一些字符编码问题 导致心态爆炸开发中断 但是就在昨天发现了另外一个微博的接口 一个手机微博的接口https://m. ...

  3. GoLang学习控制语句之for

    for结构简介 Go语言只有for循环这一种循环结构,Go语言中的for循环语句的三个部分不需要用括号括起来,但循环体必须用 { } 括起来.基本的for循环包含三个由分号分开的组成部分: 初始化语句 ...

  4. JavaScript 那些不经意间发生的数据类型自动转换

    JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式.但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的. ...

  5. POJ 2853

    #include<iostream> #include<stdio.h> #include<vector> #include<math.h> #incl ...

  6. Python多线程、多进程实现

    劝君莫惜金缕衣,劝君惜取少年时.花开堪折直须折,莫待无花空折枝. 内容摘要: paramiko模块 进程.与线程区别 python GIL全局解释器锁 多线程    语法    join    线程锁 ...

  7. 课程一(Neural Networks and Deep Learning)，第三周（Shallow neural networks）—— 0、学习目标

    Learn to build a neural network with one hidden layer, using forward propagation and backpropagation ...

  8. git提交的问题

    1. Pull is not possible because you have unmerged files.症状:pull的时候$ git pull Pull is not possible be ...

  9. 升级Ghost

    环境:CentOS 6.3 [root@AY1406151605405725a8Z ghost]# ls -l total 108 -rw-rw-rw-  1 root root  1132 Sep ...

  10. Ehcache的视频-如何用Ehcache提升你的Java应用性能

    Java应用最广的缓存(分布式缓存)Ehcache的Youtube介绍视频 (需-翻-墙)