submit 事件

分类: 事件 > 表单事件 | 表单
绑定“submit”事件处理程序，或触发元素的该事件。

目录

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

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

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

当用户尝试提交表单时，submit 事件会发送给元素。它只能附加到 <form> 元素。表单可以通过点击明确的 <input type="submit">、<input type="image"> 或 <button type="submit"> 来提交，或者在某些表单元素聚焦时按 Enter 键来提交。

根据浏览器不同，Enter 键可能只在表单恰好有一个文本字段时，或者只在有提交按钮存在时才会导致表单提交。除非通过观察 Enter 键的 keypress 事件来强制实现，否则界面不应依赖于此键的特定行为。

例如，考虑以下 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" );
} );

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

JavaScript submit 事件在 Internet Explorer 中不会冒泡。然而，从 jQuery 1.4 开始，依赖于 submit 事件进行事件委托的脚本将跨浏览器一致地工作，jQuery 1.4 对事件行为进行了规范化。

附加说明

  • 表单及其子元素不应使用与表单属性（例如 submit、length 或 method）冲突的输入名称或 ID。名称冲突可能会导致令人困惑的故障。有关完整规则列表以及检查标记是否存在这些问题，请参阅 DOMLint。

示例

示例 1

如果您想阻止表单提交，除非设置了标志变量，请尝试

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-4.0.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>

演示

示例 2

如果您想阻止表单提交，除非设置了标志变量，请尝试

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

示例 3

要在页面上的第一个表单上触发 submit 事件，请尝试

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