inputの内容に応じてクエリパラメータを動的に変更したい

Question

 <a href="?gender=male&minAge=20&maxAge=25" id="search">search</a>

性別と年齢の幅をユーザーが指定すると、それに応じてリンク先のURLにクエリパラメータが付与される機能を実装したいです。

上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？

###追記(実装例1)
次のように実装することができました。回答して下さった皆様ありがとうございました。

  <a href="" id="search">search</a>
  <input type="text" name="gender" class="inp"><br>
  <input type="text" name="minAge" class="inp"><br>
  <input type="text" name="maxAge" class="inp"><br>

const searchButton = document.getElementById('search');

searchButton.onclick = () => {
  const inputs = document.querySelectorAll('.inp');
  const keyval = [...inputs].map((e) => [e.name, e.value]);
  const searchParams = new URLSearchParams(keyval);
  const href = `?${searchParams.toString()}`;
  searchButton.setAttribute('href', href);
};

###追記(実装例2)
性別の選択をラジオボタンに変更した場合

<input type="radio" name="gender" value="male" class="radioInp">
<label for="inq1">男性</label>
<input type="radio" name="gender" value="famale" class="radioInp">
<label for="inq2">女性</label>
<input type="radio" name="gender" value="" class="radioInp">
<label for="inq3">指定なし</label><br>
<label>minAge</label> <input type="text" name="minAge" class="inp"><br>
<label>maxAge</label> <input type="text" name="maxAge" class="inp"><br>
<a href="" id="search">search</a>

const searchButton = document.getElementById('search');

searchButton.onclick = () => {
  const inputs = document.querySelectorAll('.inp');
  const keyval1 = [...inputs].map((e) => [e.name, e.value]);

  const radioInputs = document.querySelectorAll('.radioInp');
  const keyval2 = [...radioInputs].filter((e) => e.checked).map((e) => [e.name, e.value]);

  const keyval = keyval1.concat(keyval2);

  const searchParams = new URLSearchParams(keyval);
  const href = `?${searchParams.toString()}`;
  searchButton.setAttribute('href', href);
};

Answer 1

モダンブラウザ限定ですが URLSearchParams も使えそうですね。

let params = new URLSearchParams({a:"AA",b:"BB",c:null, d:undefined});
console.log( params.toString() );//  "a=AA&b=BB&c=null&d=undefined"

let params2 = new URLSearchParams([["a","AA"],["b","BB"]]);
console.log( params2.toString() );// "a=AA&b=BB"

// 追記：input[type=checkbox] など 複数選択可能なフォーム情報を扱う場合
var params3 = new URLSearchParams([["a","AA"],["b","BB"],["b","BB2"]]);
console.log( params3.toString() );// "a=AA&b=BB&b=BB2"

※ご質問では フォームの値なので input[value] の未入力は "" ですが、nullやundefined を値に渡す際は注意が必要です。

---

gender:<input type="text" name="gender" class="inp"><br>
minAge:<input type="text" name="minAge" class="inp"><br>
maxAge:<input type="text" name="maxAge" class="inp"><br>

// 以下 1. 2. のケースで共通
let inputs = document.querySelectorAll(".inp");

// 1 連想配列的に使うオブジェクトを中継する
let keyval = [...inputs].reduce((a,e)=>(a[e.name]=e.value,a),{});
let sea = new URLSearchParams(keyval);
let href = "?" + sea.toString();

// 2 キーバリューの entries を示す2次元配列を中継する
let keyval2 = [...inputs].map(e => [e.name, e.value]);
let sea2 = new URLSearchParams(keyval2);
let href2 = "?" + sea2.toString();

---

追記）radio / checkbox への対応

// 3 キーバリューの entries を示す2次元配列を中継する
let keyval3 = [...inputs].reduce(e =>{
  if( e.type.match(/radio|checkbox/) ? e.checked : true ) {
    a.push([e.name, e.value]);
  }
  return a
}, []);
let sea3 = new URLSearchParams(keyval2);
let href3 = "?" + sea2.toString();

Comments

[maskmelon]

頂いた回答を参考にして実装することができました。ありがとうございます。
質問内容とは逸れるのですが、性別の入力をラジオボタンに変更したい場合どうすればいいのでしょうか？
現状、どのボタンを選択しても全てのvalueがパラメータに入ってしまいます。（追記2）

[AkitoshiManabe]

ラジオボタンやチェックボックスは checked プロパティで判別して keyval を整える必要がありますね。

[maskmelon]

ラジオボタンでも実装できました。回答・アドバイス本当にありがとうございました。

Answer 2

こんな感じでしょうか

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.inp').forEach(x=>{
x.addEventListener('change',()=>{
var href="?"+[...document.querySelectorAll('.inp')].map(x=>`${x.name}=${encodeURIComponent(x.value)}`).join("&");
document.querySelector('#search').setAttribute('href',href);
});
});
});
</script>

<a href="" id="search">search</a>
gender:<input type="text" name="gender" class="inp"><br>
minAge:<input type="text" name="minAge" class="inp"><br>
maxAge:<input type="text" name="maxAge" class="inp"><br>

[maskmelon]

参考になりました。ご回答頂きありがとうございました。

Answer 3

過去に同様の質問がありますので、参考になるかと思います。

inputで入力された文字列をURLパラメータに入れて送るJS
https://teratail.com/questions/3990

Comments

[maskmelon]

参考になりました。ご回答頂きありがとうございました。