勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

   2024/11/05  jQuery JavaScript

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメイン/?param1=&param2=&param=3」みたいなURLとなり、見た目的に気になった。何か簡単な対応方法は無いかと探したところ、cleanQueryというjQueryプラグインで実現できる模様。以下に対応方法をメモ。

 

プラグインについて

残念ながら公式サイトは404エラーで表示できず、CDNも見つけられなかったため以下参考サイトのものを利用する。

(function($) {
    function cleanQuery(query){
        let get_param = [];
        $.each(query.split(`&`), function(i, param){
            if( param.split(`=`)[1] ){
                get_param.push(param);
            }
        });
        return get_param.join(`&`);
    }
    $.fn.cleanQuery = function() {
        this.on(`submit`, function(event){
            event.preventDefault();
            const query = cleanQuery($(this).serialize());
            location.href = `${this.action}?${query}`;
        });
        return this;
    };
})(jQuery);

 

使い方

プラグインを読み込んだ上で以下のようにフォームのIDを指定する。

$('#form_id').cleanQuery();

 

参考サイト

https://libproc.com/jquery-cleanquery/

 - jQuery JavaScript

  関連記事

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

jQueryのanimate()でページスクロール後に他の処理を実行させる方法

jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法

お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...