3-4 jQuery表单事件之submit事件
本节编程练习不计算学习进度,请电脑登录imooc.com操作

jQuery表单事件之submit事件

提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作

使用上非常简单,与基本事件参数处理保持一致

方法一:$ele.submit()

绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少

<div id="test">点击触发<div>
$("ele").submit(function(){
    alert('触发指定事件')
})
$("#text").click(function(){
     $("ele").submit()  //指定触发事件 
});

 

方法二:$ele.submit( handler(eventObject) )

绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发
    //this指向 from元素 
});

 

方法三:$ele.submit( [eventData ], handler(eventObject) )

使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
    //data => 1111 //传递的data数据
});

 

通过在<form>元素上绑定submit事件,开发者可以监听到用户的提交表单的的行为

具体能触发submit事件的行为:

上述这些操作下,都可以截获submit事件。

这里需要特别注意:

form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为
传统的方式是调用事件对象  e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下:

$("#target").submit(function(data) { 
   return false; //阻止默认行为,提交表单
});

 

任务

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <style>
  8. .left div,
  9. .right div {
  10. width: 500px;
  11. height: 50px;
  12. padding: 5px;
  13. margin: 5px;
  14. float: left;
  15. border: 1px solid #ccc;
  16. }
  17.  
  18. .left div {
  19. background: #bbffaa;
  20. }
  21.  
  22. .right div {
  23. background: yellow;
  24. }
  25.  
  26. select {
  27. height: 100px;
  28. }
  29. </style>
  30. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  31. </head>
  32.  
  33. <body>
  34. <h2>submit</h2>
  35. <div class="left">
  36. <div class="aaron">
  37. <form id="target1" action="test.html">
  38. 回车键或者点击提交表单:
  39. <input type="text" value="输入新的值" />
  40. <input type="submit" value="Go" />
  41. </form>
  42. </div>
  43. <div class="aaron">
  44. <form id="target2" action="destination.html">
  45. 回车键或者点击提交表单,禁止浏览器默认跳转:
  46. <input type="text" value="输入新的值" />
  47. <input type="submit" value="Go" />
  48. </form>
  49. </div>
  50. </div>
  51. <script type="text/javascript">
  52. //回车键或者点击提交表单
  53. $('#target1').submit(function(e) {
  54. alert('捕获提交表达动作,不阻止页面跳转')
  55. });
  56. //回车键或者点击提交表单,禁止浏览器默认跳转:
  57. $('#target2').submit(function() {
  58. alert('捕获提交表达动作,阻止页面跳转')
  59. return false;
  60. });
  61. </script>
  62. </body>
  63.  
  64. </html>
  65.  
下一节