Help us understand the problem. What is going on with this article?

値が空のパラメータがクエリー文字列に入らないGETのフォーム

More than 5 years have passed since last update.

フォームからGETしたときに値が空のパラメータがクエリー文字列に入るのが嫌だ。

値が空のパラメータにも意味があるっていうのなら話は別だけど、大抵意味がないわけよ。意味がないものでURLが長くなるのが嫌なわけよ。

それってなんとかならないかなと思って調べていたら、jQueryにいいメソッドを見つけた。.serialize()ってやつだ。これはフォームデータ集合をクエリー文字列で返すやつなんだけど、これを使えばフォームによるGETをJavaScriptでエミュレートできるわけね、こんな感じで。

$('#FORM').on('submit', function(event) {
  event.preventDefault(); // サブミットをキャンセルする。
  var query = $(this).serialize(); // フォームデータ集合をクエリー文字列で取得する。
  location.href = this.action + '?' + query; // 画面を遷移させる。
});

そしたら、これに手を加えて、クエリー文字列から値が空のパラメータが取り除かれるようにしてしまえばいいわけだ。

そうするために、クエリー文字列から値が空のパラメータを取り除く関数を作る。

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

それで、先ほどのコードでその関数を使うと、望み通りのフォームになるってわけさ。

$('#FORM').on('submit', function(event) {
  event.preventDefault(); // サブミットをキャンセルする。
  var query = $(this).serialize(); // フォームデータ集合をクエリー文字列で取得する。
  query = cleanQuery(query) // クエリー文字列から値が空のパラメータを取り除く。
  location.href = this.action + '?' + query; // 画面を遷移させる。
});

jQueryプラグイン

今回のコードをjQueryプラグインにしてみた。

使い方は、こうするだけ。

$('#FORM').cleanQuery();
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした