在页面中有多个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. Flask系列07--Flask中的CBV, 蓝图的CBV

    一.CBV使用 class base view 和django中类似 class Login(views.MethodView): # methods=["POST"," ...

  2. 使用solr crud 的三种方式（了该）

    1.solrJ       实际是http 请/响 2.spring data solr 实际是对官方类库(solrJ)的封装 3.使用httpClient 手动请求

  3. 面向对象多继承(c3算法)、网络基础和编写网络相关的程序

    一.面向对象多继承(c3算法) a.有多个父类先找左,再找右,如下示例: class A(object): pass class B(object): def f1(self): print('B') ...

  4. kafka java.rmi.server.ExportException: Port already in use

    当你在kafka-run-class.sh中添加了export JMX_PORT=9300 开启了 jmx 后, 在使用 kafka bin/目录下的脚本时会报如下错误: java.rmi.serve ...

  5. Swift5 语言参考(一) 关于语言参考

    本系列文章的这一部分描述了Swift编程语言的形式语法.此处描述的语法旨在帮助您更详细地理解语言,而不是允许您直接实现解析器或编译器. Swift语言相对较小,因为Swift代码中几乎无处不在的许多常 ...

  6. log4j的日志级别（ssm中log4j的配置）

    log4j定义了8个级别的log(除去OFF和ALL,可以说分为6个级别),优先级从高到低依次为:OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE. ALL. 1. ALL ...

  7. sync.WaitGroup和sync.Once

    sync.WaitGroup,顾名思义,等待一组goroutinue运行完毕.sync.WaitGroup声明后即可使用,它有如下方法: func (wg *WaitGroup) Add(delta ...

  8. ORA-01113 & ORA-01110同时出现

    \NOARCHIVED LOG , 没备份 , Redo Log 被覆盖 , 某个datafile不能online 设计知识点:BBED> set block 1BBED> p kcvfh ...

  9. 如何用ajax下载文件

    引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...

  10. 公共技术点( Java 反射 Reflection)

    转载路径:http://p.codekk.com/blogs/detail/5596953ed6459ae7934997c5 本文为 Android 开源项目源码解析 公共技术点中的 Java 反射 ...