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()
メソッドを呼び出した場合には送信されません。
例
この例は 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