.submit()

类别：事件 > 表单事件 | 表单

.submit( handler )返回类型：jQuery

描述：把事件处理函数绑定到“submit”JavaScript事件上，或者在元素上触发此事件。

该方法，在第一种变体中是.on( "submit", handler )的简写，在第三种变体中是.trigger( "submit" )的简写。

当用户尝试提交表单时，submit事件发送到元素。它只可以附加到<form>元素上。可以通过明确地点击<input type="submit">、<input type="image">或<button type="submit">来提交表单，也可以通过在特定表单元素得到焦点时按下Enter键来提交表单。

取决于浏览器，如果表单恰好只有一个文本字段，或者如果只出现了一个提交按钮，按Enter键可能只导致表单被提交。接口不应该依赖于针对此键的特定的行为，除非已经使用了keypress事件来监听Enter键的按下。

例如：考虑以下HTML：

1
2
3
4
5
6
7
 
<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>

可以在表单上绑定事件处理函数：

1
2
3
4
 
$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

现在当表单被提交时，就跳出警告消息。这发生在实际提交之前，所以我们可以通过在事件对象上调用.preventDefault()或者把处理函数返回false来取消提交操作。当其它元素被点击时，我们可以手工触发事件：

1
2
3
 
$( "#other" ).click(function() {
  $( "#target" ).submit();
});

代码执行之后，在Trigger the handler上点击，将显示此消息。此外，将在表单上引发默认的submit动作，所以表单将被提交。

JavaScriptsubmit事件在Internet Explorer 中不冒泡。然而，自多jQuery 1.4以来，依赖于事件传播的脚本带有submit事件，将跨浏览器一致地起作用，它已经规范化了事件的行为。

补充说明：

  • 因为.submit()方法是.on( "submit", handler )的简写，所以可以使用.off( "submit" )来分离。
  • 表单和它们的子元素不能使用与表单的属性相冲突的输入元素名或id，譬如submit、length或method。名称冲突可能导致令人费解的失败。若要完整的规则列表，并针对这些问题检查你的标记，请参阅DOMLint。

示例：

如果你想要防止表单被提交，除非设置了一个标记，请尝试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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( event ) {
  if ( $( "input:first" ).val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
 
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});
</script>
 
</body>
</html>

演示：

如果你想要防止表单被提交，除非设置了一个标记，请尝试：

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

若要在在网页的第一个表单上触发submig事件，请尝试：

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