【javascript】location.replace にクエリを付けて送信したい

Question

javascriptでフォームボタンを作っています。

通常であれば、

<form method="GET"　action="action.html"> で済みますが、今回行いたいのはブラウザのバックボタンで戻れない仕様です。

パックボタンで戻れない仕様はlocation.replaceで対応可能であることを確認済です。

正しく動く仕様

<script>
function goTop(){
  location.replace("action.html?data=tokyo");
}
</script>
<form>
<input type="button" value="都道府県選択" onclick="goTop()">
</form>

やりたいこと

上記のクエリーに記載しているdata=tokyoの部分をselectboxで変更したいというのが希望です。

<script>
function goTop(){
  location.replace("action.html");
}
</script>
<form method="GET">
<select name="data">
<option value="tokyo">東京</option>
<option value="kanagawa">神奈川</option>
<option value="chiba">千葉</option>
<option value="saitama">埼玉</option>
</select>
<input type="button" value="都道府県選択" onclick="goTop()">
</form>

としてみましたが、セレクトボックスのdataを飛ばすことが出来ませんでした。

どうすれば、セレクトボックスのデータを
location.replace("action.html");
に渡すことが出来るかご教示頂きたくお願いいたします。

Answer 1

下記の方法で自己解決しました。

<form method="post" action=""> <select name="state"> <option value="tokyo">東京</option> <option value="kanagawa">神奈川</option> <option value="chiba">千葉</option> </select> <input type="button" value="都道府県選択" onclick="goTop()"> </form> <script> window.addEventListener('DOMContentLoaded', function(){ // select要素を取得 var select_state = document.querySelector("select[name=state]"); select_state.addEventListener('change',function(){ if(select_state.value === "tokyo") { changevalue="tokyo"; } if(select_state.value === "kanagawa") { changevalue="kanagawa"; } 　 if(select_state.value === "chiba") { changevalue="chiba"; } }); }); function goTop(){ location.replace("action.html?data="+changevalue+""); } </script>

Comments

[int32_t]

そういう方針であれば、goTop()外のコードはすべて不要です。
goTop() の changevalue の部分を document.querySelector("select[name=state]").value に置き換えればよいです。

私の回答に書いたのは、フォームコントロールが複数になっても対応可能な一般的なアプローチです。

Answer 2

1. goTop() に event 引数を渡す
2. new FormData(event.target.form) で FormData オブジェクトを作る
3. new URLSearchParam(↑のオブジェクト) で URLSearchParams オブジェクトを作る
4. '?' + ↑のオブジェクト.toString() でURLのクエリ部を作る
5. location.replace() の引数に↑のクエリを足す

Comments

[tajix_japan]

有難うございます。
自分なりにいろいろ調べてみたのですが、能力不足でアドバイス頂いたものをjavascritで作り上げることが出来ませんでした。

[tajix_japan]

自分のスキル内でなんとか自己解決しました。有難うございました。