勉強したことのメモ

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

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

  jQuery JavaScript

フォームで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

  関連記事

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...