程序博客网 > 程序员的八荣八耻

FORM中使用onSubmit="return false"防止表单自动提交

来源：互联网 发布：程序员的八荣八耻 编辑：程序博客网 时间：2024/06/04 17:51

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

 

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

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

 

 

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

  1. <html>
  2. <script>
  4. function exec(p){
  5.     document.frm.action = p;
  6.     document.frm.submit();
  7. }
  8. function exec1(p){
  9.     document.frm.action = p;
  10.     document.frm.submit();
  11.     document.frm1.submit();//IE页面定位到最后一个提交的action所对应的页面
  12.     alert("haha");//submit()后边的语句正常执行，这里弹出框文字”haha“
  13. }
  14. </script>
  15. <head>
  16. <h1>总结：FORM onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别</h1>
  17. <head>
  18. <body>
  19. <!-- （1） 下边的写法使得表单frm能够自动提交 
  20. 下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com
  21. <form name='frm'  action="http://www.baidu.com"> 
  22.     <input type="text" name= "userName"/>
  23.     <input type="hidden" name= "userName1"/>
  24. </form>
  26. 注意：将上边的“<input type="hidden" name= "userName1"/>”去掉或者增加上，都不能改变页面的自动提交！
  27. -->
  29. <!-- （2）而同样的写法，进行如上的操作，却不会提交
  30. 可能是有两个文本输入框的缘故吧（注意：上边仅有一个）。
  31. 那如果一个页面中有多个from会怎样？？后边有相关试验。
  33. <form name='frm'  action="http://www.baidu.com"> 
  34.     <input type="text" name= "userName"/>
  35.     <input type="text" name= "pass"/>
  36. </form>
  37. -->
  39. <!-- （3）下面试试，同一个页面有多个from的情况
  40.  这里先试试多个form、每个form中仅有一个文本输入框
  41. <form name='frm1' action="http://www.baidu.com"> 
  42.     <input type="text" name= "userName"/>
  43.     <input type="hidden" name= "userName1"/>
  44. </form>
  45. <form name='frm2'  action="http://www.google.cn/"> 
  46.     <input type="text" name= "userName"/>
  47. </form>
  48. 经试验，每个from中的文本输入框都具有自动提交的能力。
  49. -->
  53. <!-- （4）下面试试，同一个页面有多个from的情况
  54.  这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框
  55. <form name='frm1' action="http://www.baidu.com"> 
  56.     <input type="text" name= "userName"/>
  57.     <input type="text" name= "passWord"/>
  58. </form>
  59. <form name='frm2' action="http://www.google.cn"> 
  60.     <input type="text" name= "userName"/>
  61. </form>
  62. <form name='frm3' action="http://www.yahoo.com"> 
  63.     <input type="text" name= "userName"/>
  64.     <input type="text" name= "passWord"/>
  65. </form>
  66. 经试验，只有 frm2 具有自动提交的特性。
  68. 看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。
  69. -->
  70. <!--（5）如何防止页面自动提交？！
  71. 很简单！只要在from 中加上 onSubmit="return false;"就OK了！
  72. <form name='frm1' action="http://www.baidu.com"> 
  73.     <input type="text" name= "userName"/>
  74.     <input type="text" name= "passWord"/>
  75. </form>
  76. <form name='frm2' action="http://www.google.cn"  onSubmit="return false;"> 
  77.     <input type="text" name= "userName"/>
  78. </form>
  80. 呵呵，经过onSubmit="return false;" 改造后，frm2不再自动提交了！
  81. -->
  82. <!--（6）下边看看input type="submit"对提交表单的影响
  84. 这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit="return false;" ，它是自动提交的)
  85. <form name='frm1' action="http://www.baidu.com">
  86.     <input type="text" name= "userName"/>
  87.     <input type="text" name= "passWord"/>
  88.     <input type="submit"  value="提交1"/>
  89. </form>
  90. <form name='frm2' action="http://www.google.com">
  91.     <input type="text" name= "userName"/>
  92.     <input type="text" name= "passWord"/>
  93.     <input type="submit"  value="提交2"/>
  94. </form>
  95. 则，分别鼠标点击frm1、frm2中的文本框并按回车后，会根据各自的action来进入不同的页面
  96. -->
  97. <!--（7）下边看看input type="button"对提交表单的影响
  98. <form name='frm1' action="http://www.baidu.com">
  99.     <input type="text" name= "userName"/>
  100.     <input type="text" name= "passWord"/>
  101.     <input type="button"  value="提交1"/>
  102. </form>
  103. <form name='frm2' action="http://www.google.com">
  104.     <input type="text" name= "userName"/>
  105.     <input type="text" name= "passWord"/>
  106.     <input type="button"  value="提交2"/>
  107. </form>
  109. 哈哈，分别鼠标点击frm1、frm2中的文本框并按回车后，都没有反应！看来button这样是不能提交表单的
  110. -->
  112. <!--（8）使用 "button" 来提交表单
  114. <form name='frm' action="http://www.baidu.com">
  115.     <input type="text" name= "userName"/>
  116.     <input type="text" name= ""/>
  117.     <input type="button"  value="提交1" onclick="exec('http://www.google.com')"/>
  118. </form>
  120. userName 、passWord处都填写数据，点击button。
  121. OK！连上google了，IE地址栏显示：http://www.google.com/?userName=1passWord=1
  122. -->
  123. <!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释   
  125. -->
  126. <form name='frm' action="http://www.google.com">
  127.     <input type="text" name= "userName"/>
  128.     <input type="text" name= "passWord"/>
  129.     <input type="button"  value="提交1" onclick="exec1('http://www.google.com')"/>
  130. </form>
  131. <form name='frm1' action="http://www.hao123.com">
  132.     <input type="text" name= "userName"/>
  133. </form>
  135. </body>
  136. </html>

总结期间找了些关于onsubmit="return false;"的文章，作为资料也贴在下边。

URL：http://bbsanwei.javaeye.com/blog/271547

  1. onSubmit的使用
  2.   在web开发中，我们经常会遇到，一点回车键表单就自己提交的问题，能不能禁用回车键呢，答案是肯定的. 
  5. Html代码 
  6. <from action="" method="post" onSubmit="return false">  
  7. ...............   
  8. </from>  
  11. 如果想在表单提交时，进行验证 
  13. Html代码 
  14. <html>  
  15. <head>  
  16. <script lanuage="javascript">  
  17.   function check()   
  18. {   
  19. //验证不通过时   
  20. return false;   
  21. }   
  22. </script>  
  23. </head>  
  24. <body>  
  25. <from action="" method="post" onSubmit="return check()">  
  26. ...............   
  27. </from>  
  28. </body>  
  29. </html>  
  31. <html>
  32. <head>
  33. <script lanuage="javascript">
  34.   function check()
  35. {
  36. //验证不通过时
  37. return false;
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <from action="" method="post" onSubmit="return check()">
  43. ...............
  44. </from>
  45. </body>
  46. </html>
  50. 这样就会对表单进行验证再进行提交 
  52. 要注意的是，千万不能写成 
  54. Html代码 
  55. <from action="" method="post" onSubmit="check()">  
  56. ...............   
  57. </from>  
  60. 因为check()不通过后会返回false， 因为onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true，所以还是相当于验证通过 
  61. 记得对表单验证一定要写成这样 
  63. Html代码 
  64. <from action="" method="post" onSubmit="return check()">  
  65. ...............   
  66. </from>  
0 0
程序员的八荣八耻 程序员的八荣八耻
原创粉丝点击
热门IT博客
淘宝套现被买家退款淘宝套现被买家退款
美工找素材去什么网站美工找素材去什么网站
mysql 创建组合索引
软件测试的测试流程
linux安装tar.xz文件
java多线程抢票
java调用https接口
通灵剃刀数据
发型设计有什么软件
php reflectionmethod
mac书法中文字体下载
手机 usb host软件
淘宝网丝带
网络黑白下载
张定国 非诚勿扰 知乎
生化危机7知乎
js正则匹配手机号码
恐怖黎明1.0.2.1数据库
阿里云邮企业邮箱
linux命令模式启动gui
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 摩根福克斯 大卫摩根 摩根时代 摩根碳刷 摩根石价格 摩根大厦 摩根跑车 摩根 弗里曼 摩根 莉莉 德摩根公式 安德鲁摩根 摩根史丹利 摩根品牌 老摩根 摩根墓场 摩根斯特恩 摩根定理 玛莲娜 摩根 上投摩根核心成长 摩根烫前后效果图 上投摩根新兴动力 000457上投摩根核心成长 摩根烫多少钱 上投摩根内需动力 001009上投摩根安全战略 摩根烫能维持多久 摩根烫效果图 上投摩根基金管理有限公司 约翰克里斯摩根 摩根大通提醒员工 上投摩根基金管理公司 男生摩根烫图片 黑人演员摩根弗里曼去世 摩根弗里曼去世 001313上投摩根智慧互联 摩根石的危害 摩根烫男生图片 摩根烫男图片 摩根烫图片男士 摩根烫图片男 德摩根定律三个公式

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里