FormのGET送信のURLを制御したい

Question

###実現したいこと
GETメソッドで、Formから検索条件を選択してsubmitを押すと未選択のnameも拾っています。

例）http://hoge.com/test?aaa=&bbb=&CCC=テスト

3つ４つくらいなら見栄えに問題はないのですが20個以上の選択項目になると、
URLがかなり長くなってしまうので、どうにか制御できないでしょうか？

例）CCCのみFormで入力or選択した場合
http://hoge.com/test?CCC=テスト

Answer 1

javascriptで値が設定されていないものをdisabledにする手はありますが
あまりいい方法とは言えません。
気にせずに空のデータを送ってやればいいと思います

sample

一応サンプルつけときます
セレクトボックスやラジオボタンを使う場合はもう少し工夫が必要です

<script>
function mySubmit(f){
  var url=f.action;
  for(var i=0;i<f.length;i++){
    if(f[i].name!=="" && f[i].value!==""){
      url+=(url.indexOf("?")==-1?"?":"&")+f[i].name+"="+encodeURIComponent(f[i].value);
    }
  }
  console.log(url);
  location.href=url;
  return false;
};

</script>
<form action="recv.php" method="get" onsubmit="return mySubmit(this);">
<input type="text" name="a" value="漢字"><br>
<input type="text" name="b" value="123"><br>
<input type="text" name="c"><br>
<input type="submit"><br>
</form>

Comments

[ssk]

ありがとうございます。
URLを気にするのはナンセンスですかね、、、

もう少し調べてみます。

[yambejp]

form要素を走査すればvalueの値をみて送らないことはできます

[ssk]

サンプルコードまでありがとうございます。
参考に実装を進めて参ります。

Answer 2

未選択という状態を送っていると思うので、単純なsubmitでは抑制は無理かと思います。
POSTにしたらどうでしょうか。
それともGETにこだわる理由があるのでしょうか？

Comments

[ssk]

ありがとうございます。

検索結果を他の人にもシェアできるようにしたいので、GET送信にこだわっております。

Answer 3

ボタンをsubmitではなくaタグなどクリックが可能な要素にして、
onclickイベントでform.submitというのはいかがでしょうか。

追記

submitボタンにnameを設定しないと送らないようです。
（というかnameがなければどのコントロールも拾われません）
用がなければ消しても良いかもしれません。

というでひとまずbutton要素にはnameを設定しないとして、
buttonのonclickを発生して検索条件をひとなめして空や未選択のものは除いて
location.hrefで自力でつなげたQueryStringをつけて画面遷移というやり方もありです。
※URLエンコードは必要です。

Comments

[ssk]

ありがとうございます。

なるほど。
こちらのやり方で行いたいと思います。

Answer 4

1. POST にする。
2. タグでは submit ボタンを用意せず代わりのボタンを用意し、

JavaScript で取得データを整形→submit()する。
0. .htaccess で制御する。

ですかね。

Comments

[ssk]

ありがとうございます。

GET送信は変更できないので、2の方法で実装したいと思います。