フォーム送信イベント（submit）

フォーム送信イベント（submit）は、DOMにおけるフォーム関連イベントの中で特に重要なものです。これは、ユーザーがフォーム内で「送信」操作を行った際に発生します。具体的には以下のようなケースで発火します。

  • <form> 要素内で 送信ボタン（<input type="submit"> や <button type="submit">） がクリックされたとき

  • フォーム内で入力中に Enterキーが押されたとき（一部のブラウザ・要素によって挙動が異なる場合があります）

特徴

  1. フォーム要素全体に結び付けられるイベント
    submit イベントはフォームそのものに対して発火します。送信ボタンや個別の入力要素には直接発火しません。

  2. デフォルト動作
    submit イベントのデフォルト動作は、フォームの内容をサーバーに送信してページを遷移させることです。
    JavaScriptを使ってこれを制御したい場合は、イベントオブジェクトの event.preventDefault() を用いて送信をキャンセルできます。

  3. バリデーションやAjax送信に利用
    クライアントサイドでフォームの入力チェックを行ったり、Ajaxを用いて非同期送信を行うときによく利用されます。

使用方法（例）

基本的なイベントハンドラの設定

html
<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">送信</button>
</form>

<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", function(event) {
    event.preventDefault(); // デフォルトの送信をキャンセル
    const formData = new FormData(form);
    console.log("ユーザー名:", formData.get("username"));
    // Ajaxなどでサーバーへ送信する処理をここに書く
  });
</script>

ポイントまとめ

  • submit は フォーム送信時に発生するイベント。

  • デフォルトでページ遷移（サーバー送信）が行われる。

  • event.preventDefault() を使うことで、送信処理を自分で制御できる。

  • 入力チェックやAjax通信の開始処理などに活用される。

ChatGPT5 生成日：2025/09/11