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/