JavaScript form パラメータとドメイン

先方先に飛ばす検索窓のイメージです。
select部分でドメイン、inputで通常のパラメータを付けたいのですが、うまくいきません。

以下の状況(コードで)submitすると,
https://hogehoge.com?reset=on //inputをonにした場合
となります。

formのaction値は、selectで選んだものになっています。
(例) https://hogehoge.com/hokkaido/list/

ドメインとパラメータ両方を変更し、遷移させる方法はありますでしょうか？
よろしくお願いいたします。

html
1<form target="_blank" method="get" action="">
2 <input id="toggle-datepicker" name="reset" value="" type="checkbox">
3 <select id = "js-criteria">										 
4  <option value="1" _action="/hokkaido/list/">北海道</option>
5  <option value="2" _action="/aomori/list/">青森</option>
6  <option value="3" _action="/iwate/list/">岩手</option>
7 </select>
8 <input type="submit" value="検 索">
9</form>

js
1$('input[name="reset"]').change(function(){
2 var $propChecked = $(this).prop("checked");
3 return $propChecked ? $(this).val('on') : $(this).val('');
4});
5
6$('#js-criteria').on('change',function(){
7 var selectedArea = $(this).find("option:selected").attr("_action");
8 if(selectedArea){
9  return $('#main_info_datesearch > form').attr(
10   "action", 'https://hogehoge.com' + selectedArea
11  );
12}

yambejp

2019/09/03 09:49 編集

> $('input[reset"]') typoでしょうか？ちなみに・・・・チェックして北海道を選んだ場合・チェックしないで青森を選んだ場合それぞれどこに飛ぶのが正解ですか？

SHIVA

2019/09/03 10:52

すみません、そうですね。修正しておきます。・チェックして北海道を選んだ場合 https://hogehoge.com/hokkaido/list/?reset=on ・チェックしないで青森を選んだ場合 https://hogehoge.com/aoyama/list/?reset= 以上です。よろしくお願いいたします。

yambejp

2019/09/03 11:00

$('input[type="reset"]')とありますがhtml側で name=resetの要素はあってもtype=resetの要素はありません nameだと考えて良いですか？

SHIVA

2019/09/03 11:03

はい、ミスです。。

行動規範の内容に同意します

回答1件

ベストアンサー

ざっくりこんな処理になります。

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('[name=reset]').on('change',function(e){
5    if($(this).prop('checked')){
6      $(':hidden[name=reset]').remove();
7    }else{
8      $(this).after($('<input type="hidden" name="reset" value="">'));
9    }
10    $(this).closest('form').attr('action',$('#js-criteria option:checked').data('action')).trigger('submit');
11    
12  });
13});
14</script>
15<form target="_blank" method="get" action="">
16 <input id="toggle-datepicker" name="reset" value="on" type="checkbox">
17 <select id="js-criteria">                                         
18  <option value="1" data-action="/hokkaido/list/">北海道</option>
19  <option value="2" data-action="/aomori/list/">青森</option>
20  <option value="3" data-action="/iwate/list/">岩手</option>
21 </select>
22 <input type="submit" value="検 索">
23</form>