teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問inputの内容に応じてクエリパラメータを動的に変更したい

編集履歴

質問編集履歴

11

コードの変更

2020/08/17 13:52

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -29,15 +29,15 @@
29
29
  ###追記(実装例2)
30
30
  性別の選択をラジオボタンに変更した場合
31
31
  ```HTML
32
- <input type="radio" name="gender" value="male" class="radioInp">
32
+ <input type="radio" name="gender" value="male" class="radioInp">
33
- <label for="inq1">男性</label>
33
+ <label for="inq1">男性</label>
34
- <input type="radio" name="gender" value="famale" class="radioInp">
34
+ <input type="radio" name="gender" value="famale" class="radioInp">
35
- <label for="inq2">女性</label>
35
+ <label for="inq2">女性</label>
36
- <input type="radio" name="gender" value="" class="radioInp">
36
+ <input type="radio" name="gender" value="" class="radioInp">
37
- <label for="inq3">指定なし</label><br>
37
+ <label for="inq3">指定なし</label><br>
38
- <label>minAge</label> <input type="text" name="minAge" class="inp"><br>
38
+ <label>minAge</label> <input type="text" name="minAge" class="inp"><br>
39
- <label>maxAge</label> <input type="text" name="maxAge" class="inp"><br>
39
+ <label>maxAge</label> <input type="text" name="maxAge" class="inp"><br>
40
- <a href="" id="search">search</a>
40
+ <a href="" id="search">search</a>
41
41
  ```
42
42
 
43
43
  ```JavaScript

10

追記

2020/08/17 13:52

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
7
 
8
- ###実装例
8
+ ###追記(実装例1)
9
9
  次のように実装することができました。回答して下さった皆様ありがとうございました。
10
10
  ```HTML
11
11
  <a href="" id="search">search</a>
@@ -26,21 +26,35 @@
26
26
 
27
27
  ```
28
28
 
29
- ###追記2
29
+ ###追記(実装例2)
30
30
  性別の選択をラジオボタンに変更した場合
31
31
  ```HTML
32
+ <input type="radio" name="gender" value="male" class="radioInp">
33
+ <label for="inq1">男性</label>
34
+ <input type="radio" name="gender" value="famale" class="radioInp">
35
+ <label for="inq2">女性</label>
36
+ <input type="radio" name="gender" value="" class="radioInp">
37
+ <label for="inq3">指定なし</label><br>
38
+ <label>minAge</label> <input type="text" name="minAge" class="inp"><br>
39
+ <label>maxAge</label> <input type="text" name="maxAge" class="inp"><br>
40
+ <a href="" id="search">search</a>
41
+ ```
32
42
 
43
+ ```JavaScript
33
- <div class="custom-control custom-radio custom-control-inline">
44
+ const searchButton = document.getElementById('search');
34
- <input type="radio" id="customRadioInline1" name="gender" value="male" class="custom-control-input inp">
35
- <label class="custom-control-label" for="customRadioInline1">男性</label>
36
- </div>
37
- <div class="custom-control custom-radio custom-control-inline">
38
- <input type="radio" id="customRadioInline2" name="gender" value="famale" class="custom-control-input inp">
39
- <label class="custom-control-label" for="customRadioInline2">女性</label>
40
- </div>
41
- <div class="custom-control custom-radio custom-control-inline">
42
- <input type="radio" id="customRadioInline2" name="gender" value="" class="custom-control-input inp">
43
- <label class="custom-control-label" for="customRadioInline2">指定なし</label>
44
- </div>
45
45
 
46
+ searchButton.onclick = () => {
47
+ const inputs = document.querySelectorAll('.inp');
48
+ const keyval1 = [...inputs].map((e) => [e.name, e.value]);
49
+
50
+ const radioInputs = document.querySelectorAll('.radioInp');
51
+ const keyval2 = [...radioInputs].filter((e) => e.checked).map((e) => [e.name, e.value]);
52
+
53
+ const keyval = keyval1.concat(keyval2);
54
+
55
+ const searchParams = new URLSearchParams(keyval);
56
+ const href = `?${searchParams.toString()}`;
57
+ searchButton.setAttribute('href', href);
58
+ };
59
+
46
60
  ```

9

追記

2020/08/17 13:39

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
7
 
8
- ###追記
8
+ ###実装例
9
9
  次のように実装することができました。回答して下さった皆様ありがとうございました。
10
10
  ```HTML
11
11
  <a href="" id="search">search</a>

8

コードの変更

2020/08/17 12:26

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -29,7 +29,7 @@
29
29
  ###追記2
30
30
  性別の選択をラジオボタンに変更した場合
31
31
  ```HTML
32
- <div class="radio-location">
32
+
33
33
  <div class="custom-control custom-radio custom-control-inline">
34
34
  <input type="radio" id="customRadioInline1" name="gender" value="male" class="custom-control-input inp">
35
35
  <label class="custom-control-label" for="customRadioInline1">男性</label>
@@ -42,5 +42,5 @@
42
42
  <input type="radio" id="customRadioInline2" name="gender" value="" class="custom-control-input inp">
43
43
  <label class="custom-control-label" for="customRadioInline2">指定なし</label>
44
44
  </div>
45
- </div>
45
+
46
46
  ```

7

言い回しの変更

2020/08/17 12:25

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
7
 
8
8
  ###追記
9
- 頂いた回答を参考にして次のように実装することができました。回答して下さった皆様ありがとうございました。
9
+ 次のように実装することができました。回答して下さった皆様ありがとうございました。
10
10
  ```HTML
11
11
  <a href="" id="search">search</a>
12
12
  <input type="text" name="gender" class="inp"><br>

6

追記

2020/08/17 12:24

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -24,4 +24,23 @@
24
24
  searchButton.setAttribute('href', href);
25
25
  };
26
26
 
27
+ ```
28
+
29
+ ###追記2
30
+ 性別の選択をラジオボタンに変更した場合
31
+ ```HTML
32
+ <div class="radio-location">
33
+ <div class="custom-control custom-radio custom-control-inline">
34
+ <input type="radio" id="customRadioInline1" name="gender" value="male" class="custom-control-input inp">
35
+ <label class="custom-control-label" for="customRadioInline1">男性</label>
36
+ </div>
37
+ <div class="custom-control custom-radio custom-control-inline">
38
+ <input type="radio" id="customRadioInline2" name="gender" value="famale" class="custom-control-input inp">
39
+ <label class="custom-control-label" for="customRadioInline2">女性</label>
40
+ </div>
41
+ <div class="custom-control custom-radio custom-control-inline">
42
+ <input type="radio" id="customRadioInline2" name="gender" value="" class="custom-control-input inp">
43
+ <label class="custom-control-label" for="customRadioInline2">指定なし</label>
44
+ </div>
45
+ </div>
27
46
  ```

5

追記

2020/08/17 12:22

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
7
 
8
- ---
8
+ ###追記
9
9
  頂いた回答を参考にして次のように実装することができました。回答して下さった皆様ありがとうございました。
10
10
  ```HTML
11
11
  <a href="" id="search">search</a>

4

追記

2020/08/17 12:13

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -6,6 +6,7 @@
6
6
  上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
7
 
8
8
  ---
9
+ 頂いた回答を参考にして次のように実装することができました。回答して下さった皆様ありがとうございました。
9
10
  ```HTML
10
11
  <a href="" id="search">search</a>
11
12
  <input type="text" name="gender" class="inp"><br>
@@ -23,6 +24,4 @@
23
24
  searchButton.setAttribute('href', href);
24
25
  };
25
26
 
26
- ```
27
+ ```
27
-
28
- 頂いた回答を参考にして上のように実装することができました。

3

実装例

2020/08/17 12:13

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,28 @@
1
1
  ```html
2
- <a href="?gender=male&minAge=20&maxAge=25">search</a>
2
+ <a href="?gender=male&minAge=20&maxAge=25" id="search">search</a>
3
3
  ```
4
4
  性別と年齢の幅をユーザーが指定すると、それに応じてリンク先のURLにクエリパラメータが付与される機能を実装したいです。
5
5
 
6
- 上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
6
+ 上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？
7
+
8
+ ---
9
+ ```HTML
10
+ <a href="" id="search">search</a>
11
+ <input type="text" name="gender" class="inp"><br>
12
+ <input type="text" name="minAge" class="inp"><br>
13
+ <input type="text" name="maxAge" class="inp"><br>
14
+ ```
15
+ ```JavaScript
16
+ const searchButton = document.getElementById('search');
17
+
18
+ searchButton.onclick = () => {
19
+ const inputs = document.querySelectorAll('.inp');
20
+ const keyval = [...inputs].map((e) => [e.name, e.value]);
21
+ const searchParams = new URLSearchParams(keyval);
22
+ const href = `?${searchParams.toString()}`;
23
+ searchButton.setAttribute('href', href);
24
+ };
25
+
26
+ ```
27
+
28
+ 頂いた回答を参考にして上のように実装することができました。

2

言い回しの変更

2020/08/17 12:12

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  ```html
2
2
  <a href="?gender=male&minAge=20&maxAge=25">search</a>
3
3
  ```
4
+ 性別と年齢の幅をユーザーが指定すると、それに応じてリンク先のURLにクエリパラメータが付与される機能を実装したいです。
4
5
 
5
- 上のようなリンク内のクエリパラメータをinputの入力内容に応じて動的に変更したいのですが、何か良い方法はあるでしょうか？
6
+ 上に挙げたリンクはクエリパラメータが静的な状態になっていますが、これをinputの入力内容に応じて動的に変更する良い方法はあるでしょうか？

1

言い回しの変更

2020/08/17 06:25

投稿

maskmelon
maskmelon

スコア63

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,4 @@
2
2
  <a href="?gender=male&minAge=20&maxAge=25">search</a>
3
3
  ```
4
4
 
5
- 上のようなクエリパラメータをinputの入力内容に応じて動的に変更して、リンクからアクセスできるようにしたいのですが、何か良い方法はあるでしょうか？
5
+ 上のようなリンク内のクエリパラメータをinputの入力内容に応じて動的に変更したいのですが、何か良い方法はあるでしょうか？