SQL見るだけクエリ#193 複数のformタグ内のSubmitボタンを非表示にするためのJavaScript

複数のformタグ内のSubmitボタンを非表示にするためのJavaScriptについて解説してみようと思います。

この記事を読むと（約5分）
複数のformタグ内のSubmitボタンを非表示にするためのJavaScriptについてイメージできます。

Submitボタンを非表示にする。複数箇所ある場合。

// すべてのフォームに対してイベントリスナーを登録
  const forms = document.querySelectorAll('form');
  forms.forEach(form => {
    form.addEventListener('submit', function(event) {
      // ボタンを非表示にする
      const submitButton = event.target.querySelector('button[type="submit"]');
      if (submitButton) {
        submitButton.style.display = 'none';
      }
    });
  });

このコードは、Webページ上のすべてのフォームに対してイベントリスナーを登録し、フォームが送信されるときにボタンを非表示にする機能を実装しています。以下にコードの詳細な解説をします。

const forms = document.querySelectorAll('form');
- document.querySelectorAll('form') は、ページ内のすべての form タグを取得するためのメソッドです。
- 取得したフォーム要素は forms という名前のNodeListに格納されます。

forms.forEach(form => { ... });
- forms に格納されたすべてのフォーム要素に対して、forEach メソッドを使ってループを行います。

form.addEventListener('submit', function(event) { ... });
- 各フォームに対して、submit イベントのリスナーを登録します。つまり、フォームが送信される瞬間にこのリスナーが実行されます。

const submitButton = event.target.querySelector('button[type="submit"]');
- event.target は、イベントが発生した要素（この場合はフォーム）を指します。
- event.target.querySelector('button[type="submit"]') は、フォーム内の送信ボタン（button タグの type 属性が "submit" であるもの）を取得します。
- もし送信ボタンが見つかれば、それを submitButton という変数に格納します。

if (submitButton) { submitButton.style.display = 'none'; }
- submitButton が存在する場合（送信ボタンがフォーム内に存在する場合）、display プロパティを 'none' に設定して非表示にします。
- これにより、フォームが送信されると送信ボタンが一時的に非表示になります。

このコードの目的は、フォームが送信される際にユーザーが連続して複数回送信することを防ぐために、送信ボタンを非表示にすることです。フォームのデータ送信が完了すると、ページのリロードや他の処理が行われることで再び送信ボタンが表示されることになります。これにより、ユーザーが誤ってフォームを複数回送信することを防ぎます。