HTMLFormElement: submit イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
submit イベントは <form> が送信されたときに発生します。
submit イベントは <form> 要素自身で発生するものであり、その中の <button> や <input type="submit"> で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される SubmitEvent には、送信リクエストがどのボタンで起動されたかを submitter プロパティが含まれています。
submit イベントは、ユーザーが送信ボタンを押したり、 Enter キーをフォーム内のフィールド（例えば <input type="text">）の編集中に押したりしたときに発生します。このイベントは form.submit() メソッドを呼び出した場合には送信されません。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。
addEventListener("submit", (event) => {}); onsubmit = (event) => {}; イベント型
SubmitEvent です。 Event を継承しています。
イベントプロパティ
以下に列挙したプロパティに加えて、このインターフェイスは親インターフェイスである Event を継承しています。
submitter読取専用-
HTMLElementオブジェクトで、フォームの送信を起動するために関わったボタンやその他の要素を示します。
例
この例は 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! Timestamp: ${event.timeStamp}`; event.preventDefault(); } const form = document.getElementById("form"); const log = document.getElementById("log"); form.addEventListener("submit", logSubmit); 結果
仕様書
| Specification |
|---|
| HTML # event-submit |
| HTML # handler-onsubmit |