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

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

構文

このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。

addEventListener("submit", (event) => {});onsubmit = (event) => {};

イベント型

SubmitEvent です。Event を継承しています。

イベントプロパティ

以下に列挙したプロパティに加えて、このインターフェイスは親インターフェイスであるEvent を継承しています。

submitter読取専用: HTMLElement オブジェクトで、フォームの送信を起動するために関わったボタンやその他の要素を示します。

例

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

HTML

html

<form>  <label>Test field: <input type="text" /></label>  <br /><br />  <button type="submit">Submit form</button></form><p></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);