teratail
回答率
85.43%
質問するログイン新規登録
トップJavaScriptに関する質問jsで、formから送信された値によって表示される文を変える

編集履歴

回答編集履歴

6

コメントの不備を修正

2021/01/30 22:49

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -496,7 +496,7 @@
496
496
 
497
497
  const pets = document.getElementsByName('pet');
498
498
 
499
- // 選択中のラジオボタンの値を取得
499
+ // 選択中のペットの値を取得
500
500
 
501
501
  const pet = getSelectedValue(pets, 'checked');
502
502
 

5

追記2を追加

2021/01/30 22:48

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -333,3 +333,251 @@
333
333
 
334
334
 
335
335
  ```
336
+
337
+
338
+
339
+ 追記2
340
+
341
+ ---
342
+
343
+
344
+
345
+ データ送信せず画面に表示するということであれば以下のようになるかと思いますがいかがでしょうか？
346
+
347
+
348
+
349
+ ```html
350
+
351
+ <!DOCTYPE html>
352
+
353
+ <html>
354
+
355
+
356
+
357
+ <head>
358
+
359
+ <meta charset="UTF-8">
360
+
361
+ </head>
362
+
363
+
364
+
365
+ <body>
366
+
367
+ <form action="#">
368
+
369
+ <table border="0" cellspacing="0" cellpadding="0">
370
+
371
+ <tr>
372
+
373
+ <th>猫or犬</th>
374
+
375
+ <td>
376
+
377
+ <input type="radio" name="pet" value="as" onchange="createAgeSelectList()" checked>
378
+
379
+ 猫
380
+
381
+ </input>
382
+
383
+ <input type="radio" name="pet" value="ad" onchange="createAgeSelectList()">犬</input>
384
+
385
+ </td>
386
+
387
+ </tr>
388
+
389
+ <!--上記の選択内容によってoption value選択肢を変更する-->
390
+
391
+ <br>
392
+
393
+ <tr>
394
+
395
+ <th>年齢</th>
396
+
397
+ <td>
398
+
399
+ <select name="age" id="age"></select>
400
+
401
+ </td>
402
+
403
+ </tr>
404
+
405
+ </table>
406
+
407
+ <button type="button" onclick="onClickInput()">入力</button>
408
+
409
+ </form>
410
+
411
+ <div id="output"></div>
412
+
413
+ <script>
414
+
415
+ /** 猫年齢セレクトリスト */
416
+
417
+ const CAT_LIST = [
418
+
419
+ { value: 'dd', text: '0' },
420
+
421
+ { value: 'cd', text: '1' },
422
+
423
+ { value: 'bd', text: '2' },
424
+
425
+ { value: 'ad', text: '3' },
426
+
427
+ { value: 'zc', text: '4' },
428
+
429
+ { value: 'yc', text: '5' },
430
+
431
+ { value: 'xc', text: '6' },
432
+
433
+ { value: 'wc', text: '7' },
434
+
435
+ { value: 'vc', text: '8' },
436
+
437
+ { value: 'uc', text: '9' },
438
+
439
+ { value: 'tc', text: '10' },
440
+
441
+ { value: 'sc', text: '11' },
442
+
443
+ { value: 'rc', text: '12' },
444
+
445
+ { value: 'qc', text: '13' },
446
+
447
+ { value: 'pc', text: '14' }
448
+
449
+ ];
450
+
451
+ /** 犬年齢セレクトリスト */
452
+
453
+ const DOG_LIST = [
454
+
455
+ { value: 'dd', text: '0' },
456
+
457
+ { value: 'cd', text: '1' },
458
+
459
+ { value: 'bd', text: '2' },
460
+
461
+ { value: 'ad', text: '3' },
462
+
463
+ { value: 'zc', text: '4' },
464
+
465
+ { value: 'yc', text: '5' },
466
+
467
+ { value: 'xc', text: '6' },
468
+
469
+ { value: 'wc', text: '7' },
470
+
471
+ { value: 'vc', text: '8' },
472
+
473
+ { value: 'uc', text: '9' },
474
+
475
+ { value: 'tc', text: '10' },
476
+
477
+ { value: 'sc', text: '11' },
478
+
479
+ { value: 'rc', text: '12' },
480
+
481
+ { value: 'qc', text: '13' }
482
+
483
+ ];
484
+
485
+ /** 初期表示処理 */
486
+
487
+ window.onload = function () {
488
+
489
+ createAgeSelectList();
490
+
491
+ };
492
+
493
+ /** 年齢セレクトリスト生成 */
494
+
495
+ function createAgeSelectList() {
496
+
497
+ const pets = document.getElementsByName('pet');
498
+
499
+ // 選択中のラジオボタンの値を取得
500
+
501
+ const pet = getSelectedValue(pets, 'checked');
502
+
503
+ const targetList = pet === 'as' ? CAT_LIST : DOG_LIST;
504
+
505
+ const age = document.getElementById('age');
506
+
507
+ // 表示中のセレクトリストの子要素を削除
508
+
509
+ while (age.lastChild) {
510
+
511
+ age.removeChild(age.lastChild)
512
+
513
+ }
514
+
515
+ // セレクトリスト子要素を追加
516
+
517
+ targetList.forEach(i => {
518
+
519
+ const option = document.createElement('option');
520
+
521
+ option.setAttribute('value', i.value);
522
+
523
+ option.textContent = i.text;
524
+
525
+ age.appendChild(option);
526
+
527
+ })
528
+
529
+ };
530
+
531
+ /** 入力ボタン押下時処理 */
532
+
533
+ function onClickInput() {
534
+
535
+ const pets = document.getElementsByName('pet');
536
+
537
+ // 選択中のペットの値を取得
538
+
539
+ const pet = getSelectedValue(pets, 'checked');
540
+
541
+ const ageList = document.getElementsByName('age');
542
+
543
+ // 選択中の年齢の値を取得
544
+
545
+ const age = getSelectedValue(ageList[0], 'selected');
546
+
547
+ const output = document.getElementById('output');
548
+
549
+ // 結果を表示
550
+
551
+ output.textContent = pet + age;
552
+
553
+ }
554
+
555
+ /** 選択中の値を取得 */
556
+
557
+ function getSelectedValue(nodeList, decitionItemName) {
558
+
559
+ for (let i = 0; i < nodeList.length; i++) {
560
+
561
+ if (nodeList[i][decitionItemName]) {
562
+
563
+ return nodeList[i].value;
564
+
565
+ }
566
+
567
+ }
568
+
569
+ }
570
+
571
+ </script>
572
+
573
+ </body>
574
+
575
+
576
+
577
+ </html>
578
+
579
+ ```
580
+
581
+
582
+
583
+ ご参考になれば幸いです。

4

動作確認用に使用したソースを追加しました。

2021/01/30 22:42

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -67,3 +67,269 @@
67
67
  ```
68
68
 
69
69
  上記のようにするのはいかがでしょうか？
70
+
71
+
72
+
73
+ 追記
74
+
75
+ ---
76
+
77
+
78
+
79
+ 問題なく動作しているソースを記入しておきます。
80
+
81
+ ご参考になれば幸いです。(一部ソースの記述変更していますがm(_ _)m)
82
+
83
+
84
+
85
+ 画面側
86
+
87
+ ```HTML
88
+
89
+ <!DOCTYPE html>
90
+
91
+ <html>
92
+
93
+
94
+
95
+ <head>
96
+
97
+ <meta charset="UTF-8">
98
+
99
+ </head>
100
+
101
+
102
+
103
+ <body>
104
+
105
+ <form action="http://localhost:7071/api/test" method="GET"> ←例のため記載しておきます。送信先は適宜変更してください。
106
+
107
+ <table border="0" cellspacing="0" cellpadding="0">
108
+
109
+ <tr>
110
+
111
+ <th>猫or犬</th>
112
+
113
+ <td>
114
+
115
+ <input type="radio" name="pet" value="as" onchange="createAgeSelectList()">
116
+
117
+ 猫
118
+
119
+ </input>
120
+
121
+ <input type="radio" name="pet" value="ad" checked onchange="createAgeSelectList()">犬</input>
122
+
123
+ </td>
124
+
125
+ </tr>
126
+
127
+ <!--上記の選択内容によってoption value選択肢を変更する-->
128
+
129
+ <br>
130
+
131
+ <tr>
132
+
133
+ <th>年齢</th>
134
+
135
+ <td>
136
+
137
+ <select name="age" id="age"></select>
138
+
139
+ </td>
140
+
141
+ </tr>
142
+
143
+ </table>
144
+
145
+ <button>入力</button>
146
+
147
+ </form>
148
+
149
+ <script>
150
+
151
+ /** 猫年齢セレクトリスト */
152
+
153
+ const CAT_LIST = [
154
+
155
+ { value: 'dd', text: '0' },
156
+
157
+ { value: 'cd', text: '1' },
158
+
159
+ { value: 'bd', text: '2' },
160
+
161
+ { value: 'ad', text: '3' },
162
+
163
+ { value: 'zc', text: '4' },
164
+
165
+ { value: 'yc', text: '5' },
166
+
167
+ { value: 'xc', text: '6' },
168
+
169
+ { value: 'wc', text: '7' },
170
+
171
+ { value: 'vc', text: '8' },
172
+
173
+ { value: 'uc', text: '9' },
174
+
175
+ { value: 'tc', text: '10' },
176
+
177
+ { value: 'sc', text: '11' },
178
+
179
+ { value: 'rc', text: '12' },
180
+
181
+ { value: 'qc', text: '13' },
182
+
183
+ { value: 'pc', text: '14' }
184
+
185
+ ];
186
+
187
+ /** 犬年齢セレクトリスト */
188
+
189
+ const DOG_LIST = [
190
+
191
+ { value: 'dd', text: '0' },
192
+
193
+ { value: 'cd', text: '1' },
194
+
195
+ { value: 'bd', text: '2' },
196
+
197
+ { value: 'ad', text: '3' },
198
+
199
+ { value: 'zc', text: '4' },
200
+
201
+ { value: 'yc', text: '5' },
202
+
203
+ { value: 'xc', text: '6' },
204
+
205
+ { value: 'wc', text: '7' },
206
+
207
+ { value: 'vc', text: '8' },
208
+
209
+ { value: 'uc', text: '9' },
210
+
211
+ { value: 'tc', text: '10' },
212
+
213
+ { value: 'sc', text: '11' },
214
+
215
+ { value: 'rc', text: '12' },
216
+
217
+ { value: 'qc', text: '13' }
218
+
219
+ ];
220
+
221
+ /** 初期表示処理 */
222
+
223
+ window.onload = function () {
224
+
225
+ createAgeSelectList();
226
+
227
+ };
228
+
229
+ /** 年齢セレクトリスト生成 */
230
+
231
+ function createAgeSelectList() {
232
+
233
+ // 選択中のラジオボタンを取得
234
+
235
+ const pets = document.getElementsByName('pet');
236
+
237
+ let pet;
238
+
239
+ for (let i = 0; i < pets.length; i++) {
240
+
241
+ if (pets[i].checked) {
242
+
243
+ pet = pets[i].value;
244
+
245
+ break;
246
+
247
+ }
248
+
249
+ }
250
+
251
+ const targetList = pet === 'as' ? CAT_LIST : DOG_LIST;
252
+
253
+ const age = document.getElementById('age');
254
+
255
+ // 表示中のセレクトリストの子要素を削除
256
+
257
+ while (age.lastChild) {
258
+
259
+ age.removeChild(age.lastChild)
260
+
261
+ }
262
+
263
+ // セレクトリスト子要素を追加
264
+
265
+ targetList.forEach(i => {
266
+
267
+ const option = document.createElement('option');
268
+
269
+ option.setAttribute('value', i.value);
270
+
271
+ option.textContent = i.text;
272
+
273
+ age.appendChild(option);
274
+
275
+ })
276
+
277
+ };
278
+
279
+ </script>
280
+
281
+ </body>
282
+
283
+
284
+
285
+ </html>
286
+
287
+ ```
288
+
289
+
290
+
291
+ 動作確認のため、使用したAPI側(Azure Functionsを利用。ご参考までに...)
292
+
293
+ 受け取り側で送信されてきた文字列を連結してあげれば、良いと思いました。
294
+
295
+ ```Typescript
296
+
297
+ import { AzureFunction, Context, HttpRequest } from "@azure/functions"
298
+
299
+
300
+
301
+ const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
302
+
303
+ const { pet, age } = req.query;
304
+
305
+ if (!pet || !age) {
306
+
307
+ context.res = {
308
+
309
+ status: 400,
310
+
311
+ body: "ペットまたは年齢が選択されていません。"
312
+
313
+ };
314
+
315
+ return;
316
+
317
+ }
318
+
319
+ context.res = {
320
+
321
+ status: 200,
322
+
323
+ body: pet + age // このように受け取り側で文字列を連結してあげれば良いのではと思っています。
324
+
325
+ };
326
+
327
+ };
328
+
329
+
330
+
331
+ export default httpTrigger;
332
+
333
+
334
+
335
+ ```

3

回答コメントの追加

2021/01/30 16:58

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -1,6 +1,8 @@
1
1
  受信側で文字列の結合は必要ですが、
2
2
 
3
3
  valueを変更いただくことで選択内容に合わせて受信いただけると思います。
4
+
5
+ (Javascriptを利用しないですが,,,)
4
6
 
5
7
 
6
8
 

2

インデント修正

2021/01/30 05:57

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  ```html
54
54
 
55
- <select name="CATage" onChange="number02()">
55
+ <select name="CATage" onChange="number02()">
56
56
 
57
57
  <option value="dd">0</option>
58
58
 

1

回答内容の修正

2021/01/30 05:38

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -1,245 +1,67 @@
1
+ 受信側で文字列の結合は必要ですが、
2
+
1
- 画面の結果表示については、先のコメントで質問させていただいた内容とは異なりご質問のソースのまま表示するようにしました。
3
+ valueを変更いただくことで選択内容に合わせて受信いただけると思います。
2
4
 
3
5
 
4
6
 
5
- 結果を画面に表示させるソースとして以下でいかがでしょうか？
7
+ ラジオボタンについては、猫のvalue="as" 犬のvalue="ab"
6
8
 
7
9
  ```html
8
10
 
9
- <!DOCTYPE html>
11
+ <label>
10
12
 
11
- <html>
13
+ <input
12
14
 
13
- <head>
15
+ type="radio"
14
16
 
15
- <meta charset="UTF-8">
17
+ name="cat"
16
18
 
17
- </head>
19
+ value="as"
18
20
 
19
- <body>
21
+ checked="checked"
20
22
 
21
- <form action="#">
23
+ onclick="entryChange1()"
22
24
 
23
- <table border="0" cellspacing="0" cellpadding="0">
25
+ />猫
24
26
 
25
- <tr>
27
+ </label>
26
28
 
27
- <th>猫or犬</th>
29
+ <label>
28
30
 
29
- <td>
31
+ <input
30
32
 
31
- <label>
33
+ type="radio"
32
34
 
33
- <input
35
+ name="cat"
34
36
 
35
- type="radio"
37
+ value="ab"
36
38
 
37
- name="cat"
38
-
39
- value="neko"
40
-
41
- checked="checked"
39
+ onclick="entryChange1()"
42
-
43
- />猫
44
-
45
- </label>
46
-
47
- <label>
48
-
49
- <input
50
-
51
- type="radio"
52
-
53
- name="cat"
54
-
55
- value="inu"
56
-
57
- />犬
58
-
59
- </label>
60
-
61
- </td>
62
-
63
- </tr>
64
-
65
- <!--上記の選択内容によってoption value選択肢を変更する-->
66
40
 
67
41
 
68
42
 
69
- <!--猫を選択した場合-->
43
+ />犬
70
44
 
71
- <br>
72
-
73
- <tr id="CATp">
74
-
75
- <th>年齢</th>
76
-
77
- <td>
78
-
79
- <select name="CATage">
80
-
81
- <option value="0">0</option>
82
-
83
- <option value="1">1</option>
84
-
85
- <option value="2">2</option>
86
-
87
- <option value="3">3</option>
88
-
89
- <option value="4">4</option>
90
-
91
- <option value="5">5</option>
92
-
93
- <option value="6">6</option>
94
-
95
- <option value="7">7</option>
96
-
97
- <option value="8">8</option>
98
-
99
- <option value="9">9</option>
100
-
101
- <option value="10">10</option>
102
-
103
- <option value="11">11</option>
104
-
105
- <option value="12">12</option>
106
-
107
- <option value="13">13</option>
108
-
109
- <option value="14">14</option>
110
-
111
- </select>
112
-
113
- </td>
114
-
115
- </tr>
116
-
117
-
118
-
119
- <!--犬を選択した場合-->
120
-
121
- <tr id="dogPO">
122
-
123
- <th>年齢</th>
124
-
125
- <td>
126
-
127
- <select name="DOGage">
128
-
129
- <option value="0">0</option>
130
-
131
- <option value="1">1</option>
132
-
133
- <option value="2">2</option>
134
-
135
- <option value="3">3</option>
136
-
137
- <option value="4">4</option>
138
-
139
- <option value="5">5</option>
140
-
141
- <option value="6">6</option>
142
-
143
- <option value="7">7</option>
144
-
145
- <option value="8">8</option>
146
-
147
- <option value="9">9</option>
148
-
149
- <option value="10">10</option>
150
-
151
- <option value="11">11</option>
152
-
153
- <option value="12">12</option>
154
-
155
- <option value="13">13</option>
156
-
157
- </select>
158
-
159
- </td>
160
-
161
- </tr>
162
-
163
- </table>
45
+ </label>
164
-
165
- <button type="button" onclick="number02()">入力</button>
166
-
167
- </form>
168
-
169
- <script>
170
-
171
- function number02() {
172
-
173
- // 選択中のペットを取得
174
-
175
- const cats = document.getElementsByName('cat');
176
-
177
- let pet;
178
-
179
- for (let i = 0; i < cats.length; i++) {
180
-
181
- if (cats[i].checked) {
182
-
183
- pet = cats[i].value;
184
-
185
- break;
186
-
187
- }
188
-
189
- }
190
-
191
- // 選択中の年齢を取得
192
-
193
- const select = document.getElementsByName('CATage');
194
-
195
- let age;
196
-
197
- for (let i = 0; i < select[0].length; i++) {
198
-
199
- if (select[0][i].selected) {
200
-
201
- age = select[0][i].value;
202
-
203
- break;
204
-
205
- }
206
-
207
- }
208
-
209
- if(pet === "neko" && age === 0) {
210
-
211
- document.write("asdd");
212
-
213
- }
214
-
215
- }
216
-
217
- </script>
218
-
219
- </body>
220
-
221
- </html>
222
46
 
223
47
  ```
224
48
 
225
49
 
226
50
 
227
- 修正内容
51
+ セレクトリストについては、0のvalue="dd" 1のvalue="cd"
228
52
 
229
- ---
53
+ ```html
230
54
 
55
+ <select name="CATage" onChange="number02()">
231
56
 
57
+ <option value="dd">0</option>
232
58
 
233
- ・ラジオボタンのvalueが"猫""犬"となっていましたので、表示判定のif文に合わせ"neko""inu"と変更いたしました。
59
+ <option value="cd">1</option>
234
60
 
235
- ・入力ボタンを契機にして、結果を表示するということでしたので、猫のselectタグにあったnumber02関数をbuttonタグに移動しています。また、buttonタグにtype指定がなかったため、type="button"としています。
61
+ // 以下略
236
62
 
237
- ・number02関数内の処理を変更しました。
63
+ </select>
238
64
 
239
- 今回のソースでは、selectタグinputタグそれぞれにnameが指定されていましたので、nameからNodeを取得し、選択されているvalueを取得するようにしています。それぞれ選択肢が複数存在するため、inputタグでは選択中のcheckedを確認、selectタグでは選択中のselectedを確認し対象の値を取得しています。
65
+ ```
240
66
 
241
- 　表示条件については、それぞれの選択で取得したvalueを元に比較しています。
242
-
243
-
244
-
245
- ご参考になれば幸いです。
67
+ 上記のようにするのはいかがでしょうか？