HTMLFormElement: submit イベント

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

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

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

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 の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
submit eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報