formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
2024/11/05
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメイン/?param1=¶m2=¶m=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();
参考サイト
関連記事
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
-
jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...