【JavaScript】formのGETメソッドで空のinputパラメータを送信しないようにする

こんにちは、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要素が送信されないように対策してみます。

HTML

<form method="get" action="">
    <table>
        <tbody>
            <tr>
                <th>名前</th>
                <td>
                    <input name="name" type="text" value="">
                </td>
            </tr>
            <tr>
                <th>メールアドレス</th>
                <td>
                    <input name="email" type="email" value="">
                </td>
            </tr>
            <tr>
                <th>電話番号</th>
                <td>
                    <input name="tel" type="tel" value="">
                </td>
            </tr>
            <tr>
                <th>お問い合わせ内容</th>
                <td>
                    <textarea name="content"></textarea>
                </td>
            </tr>
            <tr>
            <th>その他</th>
                <td>
                    <textarea name="other"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
    <button>送信</button>
</form>

JavaScript

//ドキュメント上の最初のフォーム要素を取得
const form = document.forms[0];

//formのsubmitイベントで発火
form.addEventListener('submit', ()=>{

    //formのinput要素を処理
    Array.from(form).forEach((input)=>{

        //値が空の場合
        if(input.value === ''){
            //disabledを有効にする
            input.disabled = true;
        }
    });
}, false);

処理内容はコメントに記載の通りです。これでinputの値が空の要素がパラメータに含まれないようになります。同じような現象でお悩みの方はぜひ試してみてくださいね。

最後に

form要素を使用する場合、バリデーションチェックをされる場合がほとんどだと思います。もしGETメソッドを使用していて、フォームの送信先に空のinputパラメータを渡す必要がない場合は、バリデーションチェックとあわせて空のinput要素に対してdisabledを設定する処理を追加しても良いかもしれないですね。

以上、JavaScriptで、formのGETメソッドで空のinputパラメータを送信しないようにする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら