总结:FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

 今天在实现业务的时候,jsp页面总是自动提交。

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

 

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

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

 

 

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

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

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

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

  1. onSubmit的使用
  2.   在web开发中,我们经常会遇到,一点回车键表单就自己提交的问题,能不能禁用回车键呢,答案是肯定的. 
  3. Html代码 
  4. <from action="" method="post" onSubmit="return false">  
  5. ...............   
  6. </from>  
  7. 如果想在表单提交时,进行验证 
  8. Html代码 
  9. <html>  
  10. <head>  
  11. <script lanuage="javascript">  
  12.   function check()   
  13. {   
  14. //验证不通过时   
  15. return false;   
  16. }   
  17. </script>  
  18. </head>  
  19. <body>  
  20. <from action="" method="post" onSubmit="return check()">  
  21. ...............   
  22. </from>  
  23. </body>  
  24. </html>  
  25. <html>
  26. <head>
  27. <script lanuage="javascript">
  28.   function check()
  29. {
  30. //验证不通过时
  31. return false;
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <from action="" method="post" onSubmit="return check()">
  37. ...............
  38. </from>
  39. </body>
  40. </html>
  41. 这样就会对表单进行验证再进行提交 
  42. 要注意的是,千万不能写成 
  43. Html代码 
  44. <from action="" method="post" onSubmit="check()">  
  45. ...............   
  46. </from>  
  47. 因为check()不通过后会返回false, 因为onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true,所以还是相当于验证通过 
  48. 记得对表单验证一定要写成这样 
  49. Html代码 
  50. <from action="" method="post" onSubmit="return check()">  
  51. ...............   
  52. </from>  
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值