HTMLFormElement: submit イベント

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

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 をログ出力し、それからフォームを送信する既定の動作を阻止します。

<form id="form">
  <label>Test field: <input type="text"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

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 の <form> 要素
• 関連イベント: invalid