HTMLFormElement: submit イベント - Web API | MDN
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。
js
addEventListener("submit", (event) => {});
onsubmit = (event) => {};
イベント型
SubmitEvent です。 Event を継承しています。
イベントプロパティ
以下に列挙したプロパティに加えて、このインターフェイスは親インターフェイスである Event を継承しています。
submitter読取専用-
HTMLElementオブジェクトで、フォームの送信を起動するために関わったボタンやその他の要素を示します。
例
この例は EventTarget.addEventListener() を使用してフォームの送信を待受けし、実行されたときに現在の Event.timeStamp をログ出力し、それからフォームを送信する既定の動作を阻止します。
HTML
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
js
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 |