フォーム内の未入力の Input などのパラメータを精査する。

jQueryを使わない方法は、「[JavaScript] 空のGETパラメータを送信しない方法」を参照。

少し前に「[PHP] GET で渡された空白パラメータを削除する方法」という記事を書いた。
これはサーバサイドでGETの値を直接操作する方法で個人的にあまりやりたくない方法だった。

そこでも書いているけれど、そもそもフロント側で空のパラメータは送信しなければ良いのではないかと考えていた。

方法

サブミット時に空のパラメータだけ削除して送信する。

jQueryプラグイン

結果として、軽く調べるとjQueryプラグインがあったので大人しくそれを使うことにする。

jQuery cleanQuery

$('form').cleanQuery();

使い方は、上記のように指定のフォームに対して cleanQuery()をあてがうだけ。

詳しい解説はHTML - 値が空のパラメータがクエリー文字列に入らない GET のフォーム - Qiitaにあったので引用しておく。

内部的には、サブミット時に以下の流れで処理をしている。

  1. サブミットを中止
  2. フォーム内のパラメータを取得
    • 取得したパラメータから値が空のものを取り除く
  3. 正規化したパラメータをフォームのactionにくっ付けて遷移させる（GET）
/*
 * 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);

改変

途中まで自分の作っていたコードもあったのだけれど、こちらのコードをベースに要件へ沿う形で改変させてもらった。（フォームを弄る別のソースと混ぜ込む形で使いたかったのでプラグインから切り離した）

$('.clean-query').on('submit', function (e) {
  e.preventDefault();

  var query = $(this).serialize();

  location.href =
    this.action +
    '?' +
    (function () {
      var arr = [];
      $.each(query.split('&'), function (i, p) {
        if (p.split('=')[1]) {
          arr.push(p);
        }
      });
      return arr.join('&');
    })();
});

やっていることは全く同じだけど、ここでしか使われないcleanQuery()を新たに記述するのもアレだったのでクロージャしている。

普通に使うのであれば大人しくプラグインを使った方が良いだろう。