总结：FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
最近被form的自动提交烦的不行，网上搜了一些资料，下面这篇文章总结的非常全，基本好多我之前也都试过了（就差总结了^=^）。呵呵，有网友总结的这么全，就直接拿来了：）

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

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

<form name="frm" method="post" οnsubmit="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" ο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='frm' action="http://www.google.com">
    <input type="text" name= "userName"/>
    <input type="text" name= "passWord"/>
    <input type="button" value="提交1" οnclick="exec1('http://www.google.com')"/>
</form>
<form name='frm1' action="http://www.hao123.com">
    <input type="text" name= "userName"/>
</form>

</body>
</html>
总结期间找了些关于οnsubmit="return false;"的文章，作为资料也贴在下边。

URL：http://bbsanwei.iteye.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>

转载于:https://www.cnblogs.com/liuzhuqing/archive/2012/11/07/7480712.html

JSP FORM 提交相关推荐

  1. jsp form提交到后台中文乱码_JSP与servlet之间的数据传递

    [51] Jsp与Servlet之间的传值有两种,一种是Jsp传值给Sevlet,另一种是Servlet传值给Jsp:使用request.response对象完成传值,具体实现如下: Jsp与Serv ...

  2. jsp form提交到后台中文乱码_2019.6.12 servlet 3.0 和 JSP

    一 . servlet 3.0 @webservlet("/***") -- 当前资源的对外访问路径 - 注解对外访问 @webFilter("/*") --- ...

  3. .jsp页面提交form表单，后台却无法获取input文本框value值

    问题一:奇葩bug总结:input提交,后端获取不到value问题 注意: java后端jsp页面input disabled="disabled"表单提交,后端无法print获取 ...

  4. spring MVC做form提交Neither BindingResult nor plain target object for bean name 'command' available...

    我的改正是在form表单上添加了个modelAttribute="employee"然后在 @RequestMapping(value="/emp",metho ...

  5. 编写两个jsp页面inputString.jsp 和computer.jsp，用内置对象获取inputString.jsp页面提交的字符串。

    编写两个jsp页面inputString.jsp 和computer.jsp,用户可以并使用inputString.jsp提供的表单输入一个字符串,并提交给computer.jsp页面,该页面通过内置 ...

  6. php防止恶意频繁刷新页面或form提交

    php防止恶意频繁刷新页面或form提交 很多方法:(以下仅简单方法的简单思路,对于防止菜鸟"黑客"足矣): 1.检测referer来源地址是否为本站.($_SERVER['HTT ...

  7. easyui form提交和formdata提交记录，查看FormData对象内部的值

    1  easyui form提交 $('form').form('submit',{url:'';onSubmit:'';success:function(data){//这种方法获取到的data是字 ...

  8. $.ajax使用总结(一)：Form提交与Payload提交

    http://blog.csdn.net/yiifaa/article/details/73468001 *********************************************** ...

  9. 如何避免form提交进行页面跳转

    正常的form表单提交后需要进行页面跳转,如果我们不希望进行页面跳转,那么按以下两个步骤,通过一个iframe就可以解决这个问题: 步骤一:首先在页面中定义一个空的不可见的iframe 1 <! ...

最新文章

  1. 使用cx_freeze打包Python程序
  2. Activity两个启动方法的区别
  3. python怎样入门_python怎么入门啊?
  4. 获取中位数java_java 计算中位数方法
  5. oracle 计算中位数,SQL 如何计算每个分组的中位数
  6. 5d4的白平衡模式_佳能5D4/5D3/6D2系列中高端单反相机和全画幅微单EOS R专题系列课程...
  7. 极限挑战logo的制作教程
  8. java中mydoc_实验二/MyDoc.java · 20175326李一潇/20175326java - Gitee.com
  9. mysql -e -f_twitter-不正确的字符串值：'\ xF0 \ x9F \ x8E \ xB6 \ xF0 \ x9F ...'MySQL
  10. IIS7 大文件上传下载限制设置
  11. 华为S5720s交换机console口配置
  12. Linux 多线程同步之哲学家用餐问题分析
  13. linux中的sg工具,sg3_utils工具windows系统下的使用
  14. 整理阿里巴巴社招最新面试题及答案，附复学习笔记，面试成功归来
  15. SDWAN组网与传统组网方式的对比
  16. 易盾php,PHP接入网易易盾验证码
  17. Marple表演电影字幕
  18. android中使用tmf框架插件化开发的问题
  19. 启动mysql报错：mysql.service: Service hold-off time over, scheduling restart
  20. 被动信息收集----指纹识别(CMS识别)

热门文章

  1. 撑起整个互联网的7大开源技术
  2. glibc（ptmalloc）内存暴增问题解决
  3. vue学习笔记——路由
  4. [CF413D]2048
  5. ​关于虚拟机迁移文档（p2v v2v
  6. 让底部始终在浏览器底部
  7. Android在ListView滑动数据混乱
  8. ECS是阿里云提供的什么服务
  9. ajax hash调用实例
  10. [shiro] - 怎样使用shiro?