• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • submit()

    为 JavaScript 的"submit"事件绑定一个处理函数,或者触发元素上的该事件。

    .submit(handler(eventObject))
    • handler(eventObject)类型:Function()。每次事件触发时会执行的函数。
    .submit([eventData ], handler(eventObject))
    • eventData类型: PlainObject。一个对象,它包含的数据键值对映射将被传递给事件处理程序。
    • handler(eventObject)类型:Function()。每次事件触发时会执行的函数。
    .submit()
    • 这个方法不接受任何参数。

    这个函数的前两个用法是.bind('submit', handler)的快捷方式,第3个不带参数的用法是.trigger('submit')的快捷方式。

    当用户试图提交表单时,就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上。以下几种情况会导致表单被提交:用户点击了<input type="submit">,<input type="image">,或者<button type="submit">,或者当某些表单元素获取焦点时,敲击Enter(回车键),都可以提交。

    根据不同的浏览器,Enter 键可能会导致表单被提交,如果这个表单只有一个文本框或只有一个 submit 按钮的话。界面不应该依赖于这个键的特殊行为,除非已经使用了 keypress 事件来监听 Enter 键的按下。

    举例来说,请看下面的HTML:

    <form id="target" action="destination">
      <input type="text" value="Hello there" />
      <input type="submit" value="Go" />
    </form>
    <div id="other">
      Trigger the handler
    </div>
    

    这个事件处理程序可以绑定到表单

    $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });
    

    现在当表单提交时,警告将被显示。出现这种情况的实际提交之前,所以我们可以通过调用事件对象的.preventDefault()或在处理函数中返回false来取消提交:

    $('#other').click(function() {
      $('#target').submit();
    });
    

    这些代码执行后,点击Trigger the handler 同样会警报显示。此外,默认的submit表单上的动作上会被触发,所以表格将被提交。

    在Internet Explorer中,JavaScript的submit事件不会泡沫。但是,依赖submit事件代理的脚本,从 jQuery 1.4 开始,可以跨浏览器正常使用。

    Additional Notes(其他注意事项):

    • 表单及他们的子元素不应该使元素名称或ID属性冲突,比如submit,length,或method。名称冲突可能会导致混乱的失败。对于一个完整的规则列表,并检查这些问题标记,看DOMLint。
    • .submit()方法只是作为.on("submit", handler)的一个速记写法,移除该事件可以使用.off("submit")

    例子

    如果你想根据一个标识来阻止表单被提交的话,可以像下面这样做:

    <!DOCTYPE html>
    <html>
    <head>
      <style> 
      p { margin:0; color:blue; }
      div,p { margin-left:10px; }
      span { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Type 'correct' to validate.</p>
      <form action="javascript:alert('success!');">
        <div>
          <input type="text" />
     
          <input type="submit" />
        </div>
      </form>
      <span></span>
    <script>
     
    $("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });
    </script>
     
    </body>
    </html>
    

    Type 'correct' to validate.

    如果你想根据一个标识来阻止表单被提交的话,可以像下面这样做:

    $("form").submit( function () {
      return this.some_flag_variable;
    } );
    

    触发页面上第一个表单的提交事件:

    $("form:first").submit();
    

    上篇:select()

    下篇:focusin()