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" );
} );

執行此程式碼後，按一下 觸發處理常式 也會顯示訊息。此外，表單上的預設 submit 動作會被觸發，因此表單會被提交。

JavaScript submit 事件不會在 Internet Explorer 中浮現。然而，依賴使用 submit 事件進行事件委派的腳本在 jQuery 1.4 之後會在所有瀏覽器中一致運作，因為它已將事件行為標準化。

其他注意事項

  • 表單及其子元素不應使用與表單屬性衝突的輸入名稱或 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.jquery.com/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" );