jQueryでinputのactionの値を変更する方法

Question

車サイトの在庫検索ページを作成しているのですが、うまくいきませんのでご教授願います。
htmlでcheckboxを複数用意して、チェックが入っている場合にactionで設定している飛び先のURLにパラメーターを付与したいのですが、うまくいきません。

また複数チェックの場合はパラメーターをつなげて絞り込みをしたいと考えております。

例）https://example.com?pram1=hoge&param2=fuga

例えばhttps://example.comようなページあったとして
チェックが入っていない場合の飛び先には車両が全件表示されています。

チェックが入っていた場合には、
例）https://exsample.com?pram1=hoge&param2=fuga
のようにパタメーターを付与して絞り込みをして表示をしたいと考えています。

<form action="https://example.com" method="POST" id="form">
  <input type="checkbox" name="car_name01"><label>20系アルファード</label>
  <input type="checkbox" name="car_name02"><label>30系アルファード</label>
</form>

$(function(){
  $('[name="car_name01"]').change(function(){
    var prop = $('[name="car_name01"]').prop('checked');
    if(prop){
      var param1 = 'hoge';
      $('#form').attr('action', param1);
    }
  });
});

Comments

[m.ts10806]

デベロッパツールでhtmlの変化は監視してますか？

[rinrin1137]

監視はしておりますが、actionの値に変化はありませんでした。

[m.ts10806]

どこまでデバッグされましたか？
changeイベントが起きてるかどうか
propの結果
この2つくらいでおおよそ原因まで掴めそうですが。
ただ今のままだとイベント通っててもactionがパラメータそのままに置き換わってしまうように思います。
というか、methodをPOSTからGETに変えるだけでいいようにも思いますが。（action先の作り次第）

[rinrin1137]

ちなみにattrの中で書き換える値の設定で変数を使用することはできますでしょうか？

[yambejp]

グーグルにほんとに投げるつもりじゃなけr場
google.comは例としてはよくない
exsample.comとかにした方がよいでしょう

[rinrin1137]

ありがとうございます。
修正をさせていただきます。

[yambejp]

https://exsample.com&パラメーター1&パラメーター2
について、パラメータは?で付加し、キーと値を持たせるものですから
https://exsample.com?pram1=hoge&param2=fuga
のような書き方のほうがつたわりやすいです

[rinrin1137]

こちらも修正させていただきます。
書き方が乱雑になってしまい申し訳ございません。
勉強になります。

[m.ts10806]

exampleですね
例示ドメイン

[m.ts10806]

>ちなみにattrの中で書き換える値の設定で変数を使用することはできますでしょうか？

変数と言っても情報を保持、展開するための箱でしかないので、適切な参照の仕方をするのであれば文字列となんらかわりないです

[rinrin1137]

attr('action', `${変数名}`)

などで展開方法はあっていますでしょうか？

Answer 1

落とし所がわからなくなってきてますがこんな感じですか？

Comments

[yambejp]

$(function(){
var fd=new FormData();
$('[data-param]').on('change',function(){
var act=$(this).closest('form').attr('action');
var base=act.split("?")[0]||act;
var params=$('[data-param]:checked').map(function(){
return $(this).data('param');
}).get();
$(this).closest('form').attr('action',base+(params.length==0?"":("?"+params.join("&"))));
});
});
</script>

<form action="https://example.com" method="POST" id="form">
<label><input type="checkbox" name="car_name01" data-param="param1=hoge">20系アルファード</label>
<label><input type="checkbox" name="car_name02" data-param="param2=fuga">30系アルファード</label>
</form>