HOMEJavaScript【JavaScript】formのGETメソッドで空のinputパラメータを送信しないようにする【JavaScript】formのGETメソッドで空のinputパラメータを送信しないようにする2022.01.08JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで、formのGETメソッドを指定している場合に空のinputパラメータを送信しないようにする方法をご紹介しています。JavaScriptでformの空のinputパラメータを送信しないようしたいな。良い方法ないかな?上記の疑問にお答えします。GETメソッドの空のinputパラメータとは下記はform要素のGETメソッドで空のinputパラメータを送信した際のURLです。http://localhost/?name=&email=&tel=&content=&other=上記URLの?以降にinputパラメータが続いていますが、=の右辺を見ると値が空の状態です。上記のような空のパラメータを、空のinputパラメータとしています。GETメソッドでフォームの送信先に空のinputパラメータが渡ってしまうと、URLが長くなる、視認性が悪くなる、アクセス解析の妨げとなるといったデメリットがあります。このようなデメリットを解消するため、form要素をGETメソッドでsubmitした際に空のinputパラメータが送信先に渡らないようにしてみます。GETメソッドで空のinputパラメータを送信しないようにするにはformのGETメソッドで空のinputパラメータを送信しないようにする方法は色々あると思いますが、本記事ではform要素のsubmitイベントが発火した際にinput要素の値が空の場合はdisabledを有効にして、input要素が送信されないように対策してみます。false);処理内容はコメントに記載の通りです。これでinputの値が空の要素がパラメータに含まれないようになります。同じような現象でお悩みの方はぜひ試してみてくださいね。最後にform要素を使用する場合、バリデーションチェックをされる場合がほとんどだと思います。GETメソッドを使用していて、フォームの送信先に空のinputパラメータを渡す必要がない場合は、バリデーションチェックとあわせて空のinput要素に対してdisabledを設定する処理を追加しても良いかもしれないですね。以上、JavaScriptで、formのGETメソッドで空のinputパラメータを送信しないようにする方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。