返回值:jQuerysubmit(handler(eventObject))

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

带有参数的该方法是 .bind('submit', handler) 的快捷方式 variation, and .trigger('submit') 的快捷方式。

当用户尝试提交表单时,就会触发 submit 事件。该事件只能绑定在 <form> 元素上。以下几种情况会导致表单被提交:用户点击了 <input type="submit">, <input type="image">, 或 <button type="submit">, 亦或当表单获得了焦点时,按下了 Enter 键。

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

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

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

将该事件绑定在 form 上:

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

当提交表单时,就会显示一个提示框。该事件发生在真正提交表单之前,因此,我们可以通过调用事件对象上的 .preventDefault() 或返回 false 的方式来取消提交。我们可以在点击其它元素时,手动触发该方法:

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

执行完上述代码之后,点击 Trigger the handler 同样会显示提示框。除此之外,submit 的默认行为将会被触发,即提交表单。

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

补充说明:

  • 为避免名字冲突,表单及其子元素的 id 或名字,不应该使用 input 名,或表单的属性名,例如:submit, length, 或 method。名字冲突会导致令人困惑的错误。有关完整的规则列表,及这些问题标记,请参见 DOMLint

示例:

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

<!DOCTYPE html>
<html>
<head>
<style>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
<script src="jquery.min.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>

演示:

示例:

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

jQuery 代码:
$("form").submit( function () {
  return this.some_flag_variable;
} );

示例:

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

jQuery 代码:
$("form:first").submit();