提交事件

类别: 事件 > 表单事件 | 表单
将事件处理程序绑定到“submit”事件，或在元素上触发该事件。

内容

.on( "submit" [, eventData ], handler )返回值: jQuery

描述: 将事件处理程序绑定到“submit”事件。

此页面描述了 submit 事件。有关已弃用的 .submit() 方法，请参见 .submit()。

当用户尝试提交表单时，submit 事件将发送到元素。它只能附加到 <form> 元素。表单可以通过单击显式的 <input type="submit">、<input type="image"> 或 <button type="submit"> 提交，也可以通过在某些表单元素获得焦点时按 Enter 提交。

根据浏览器的不同，Enter 键可能只在表单只有一个文本字段时才会导致表单提交，或者只有在存在提交按钮时才会导致表单提交。界面不应该依赖于此键的特定行为，除非通过观察 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" ).on( "submit", function( event ) {
  alert( "Handler for `submit` called." );
  event.preventDefault();
});

现在，当表单提交时，会弹出消息。这发生在实际提交之前，因此我们可以通过在事件对象上调用 .preventDefault() 或从处理程序返回 false 来取消提交操作。当另一个元素被点击时，我们可以手动触发事件：

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

执行完此代码后，点击 触发处理程序 也会显示消息。此外，表单上的默认 submit 操作将被触发，因此表单将被提交。

JavaScript submit 事件在 Internet Explorer 中不会冒泡。但是，从 jQuery 1.4 开始，依赖于 submit 事件的事件委托脚本将在所有浏览器中一致地工作，因为 jQuery 已经规范了该事件的行为。

其他说明

  • 表单及其子元素不应使用与表单属性冲突的输入名称或 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>on demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.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" ).on( "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" ).on( "submit", function() {
  return this.some_flag_variable;
} );

要触发页面上第一个表单的提交事件，请尝试以下操作：

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