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

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

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

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

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

Submitボタンを非表示にする

document.querySelector('form').addEventListener('submit', function() {
  document.querySelector('button[type="submit"]').style.display = 'none';
});

このスクリプトは、特定のformタグ内のSubmitボタンを非表示にするためのJavaScriptコードです。

  1. document.querySelector('form'): この部分は、HTML内の最初のform要素を取得しています。document.querySelectorはCSSセレクタを使って要素を取得するメソッドで、ここでは'tagName'セレクタを使用してform要素を取得しています。

  2. addEventListener('submit', function() { ... }): 取得したform要素に対して、submitイベントのリスナーを追加しています。つまり、このコードはformがsubmitされた時に指定された関数が実行されるようになります。

  3. function() { ... }: これは無名関数(匿名関数)と呼ばれる関数の定義部分です。submitイベントが発生した時に実行される処理をこの無名関数の中に記述します。

  4. document.querySelector('button[type="submit"]'): 無名関数内で、再びCSSセレクタを使ってform内の最初のtype属性が"submit"であるbutton要素を取得しています。このコードはsubmitボタンを指定しています。

  5. style.display = 'none';: 取得したSubmitボタンに対して、styleプロパティを使ってCSSスタイルを操作しています。ここでは、displayプロパティを'none'として設定しているため、Submitボタンが非表示になります。

つまり、このスクリプトは、フォームがsubmitされた際にSubmitボタンを非表示にするという動作を実現しています。ただし、再度Submitボタンを表示させる方法がないため、実際の運用には注意が必要です。

SQLの使いどころ

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

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

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

KK

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