UI設計したり、ウェブシステムを開発したりします。 

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

記入日:2023-07-20 編集日:2023-07-20

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

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

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

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

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

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

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

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。