HTMLFormElement: submit イベント

submit イベントは <form> が送信されたときに発生します。

バブリング	あり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル	可
インターフェイス	`SubmitEvent` (en-US)
イベントハンドラープロパティ	`GlobalEventHandlers.onsubmit` (en-US)

submit イベントは <form> 要素自身で発生するものであり、その中の <button> や <input type="submit"> で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される SubmitEvent (en-US) には、送信リクエストがどのボタンで起動されたかを submitter (en-US) プロパティが含まれています。

submit イベントは、ユーザーが送信ボタン (<button> または <input type="submit">) を押したり、 Enter キーをフォーム内のフィールド (例えば <input type="text">) の編集中に押したりしたときに発生します。このイベントは form.submit() メソッドを呼び出した場合には送信されません。

注: フォームの検証に合格していないフォームを送信しようとすると、 invalid イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 submit イベントは発生しません。

例

この例は EventTarget.addEventListener() を使用してフォームの送信を待受けし、実行されたときに現在の Event.timeStamp をログ出力し、それからフォームを送信する既定の動作を阻止します。

HTML

<form id="form">
  <label>Test field: <input type="text"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

JavaScript

function logSubmit(event) {
  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById('form');
const log = document.getElementById('log');
form.addEventListener('submit', logSubmit);

結果

仕様書

仕様書	状態	備考
HTML Living Standard submit の定義	草案	変更なし
HTML 5.2 submit の定義	勧告	変更なし
HTML 5.1 submit の定義	勧告	変更なし
HTML5 submit の定義	勧告	初回定義

ブラウザーの互換性

BCD tables only load in the browser

HTMLFormElement: submit イベント

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報