勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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

 

プラグインについて

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

/*
* jQuery cleanQuery 2013-03-23
* Authored by guimihanui
* Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
*/

(function($) {
    function cleanQuery(query) {
        var arr = [];
        $.each(query.split('&'), function(i, param) {
            if (param.split('=')[1]) { arr.push(param); }
        });
        return arr.join('&');
    }

    $.fn.cleanQuery = function() {
        this.on('submit', function(event) {
            event.preventDefault();

            var query = cleanQuery($(this).serialize());
            location.href = this.action + '?' + query;
        });

        return this;
    };
})(jQuery);

 

使い方

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

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

 

参考サイト

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

 - jQuery, JavaScript

  関連記事

JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

IEでjavascript関数の初期値

あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどI ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

フォームのpasswordとtextをjQueryで切り替えて

パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...

画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...