Q&A
ご質問拝見いたしました。
いくつかご質問したのですが、
・入力ボタンがイベントの契機と考えてよろしいでしょうか？
・結果を表示する箇所が見受けられないのですが、どちらに表示予定でしょうか？
・猫/犬の年齢の入力箇所は常に両方表示される仕様でしょうか？
・猫/犬の選択時、年齢の選択時にそれぞれイベントが設定されていますがそれぞれどのような仕様になりますでしょうか？
html
1コード 2 <form action="#"> 3 <table border="0" cellspacing="0" cellpadding="0"> 4 <tr> 5 <th>猫or犬</th> 6 <td> 7 <label> 8 <input 9 type="radio" 10 name="cat" 11 id="neko" 12 value="猫" 13 checked="checked" 14 onclick="entryChange1()" 15 />猫 16 </label> 17 <label> 18 <input 19 type="radio" 20 name="cat" 21 id="dog" 22 value="犬" 23 onclick="entryChange1()" 24 25 />犬 26 </label> 27 </td> 28 </tr> 29 <!--上記の選択内容によってoption value選択肢を変更する--> 30 31 <!--猫を選択した場合--> 32 <br> 33 <tr id="CATp"> 34 <th>年齢</th> 35 <td> 36 <select name="CATage" onChange="number02()"> 37 <option value="0">0</option> 38 <option value="1">1</option> 39 <option value="2">2</option> 40 <option value="3">3</option> 41 <option value="4">4</option> 42 <option value="5">5</option> 43 <option value="6">6</option> 44 <option value="7">7</option> 45 <option value="8">8</option> 46 <option value="9">9</option> 47 <option value="10">10</option> 48 <option value="11">11</option> 49 <option value="12">12</option> 50 <option value="13">13</option> 51 <option value="14">14</option> 52 </select> 53 </td> 54 </tr> 55 56 <!--犬を選択した場合--> 57 <tr id="dogPO"> 58 <th>年齢</th> 59 <td> 60 <select name="DOGage"> 61 <option value="0">0</option> 62 <option value="1">1</option> 63 <option value="2">2</option> 64 <option value="3">3</option> 65 <option value="4">4</option> 66 <option value="5">5</option> 67 <option value="6">6</option> 68 <option value="7">7</option> 69 <option value="8">8</option> 70 <option value="9">9</option> 71 <option value="10">10</option> 72 <option value="11">11</option> 73 <option value="12">12</option> 74 <option value="13">13</option> 75 </select> 76 </td> 77 </tr> 78 </table> 79 <button>入力</button> 80 </form> 81 <script type="text/javascript" src="pet.js"></script> 82 <script type="text/javascript" src="pet2.js"></script>
js
1コード 2--pet2.js-- 3function number02() { 4 select = document.getElementsByName('CATage') 5 6 7 if(entryChange1== "neko" && number02== "0") { 8 document.write("asdd") 9 } 10} 11 12
例えば猫と0を選択した場合はasddとブラウザに表示、犬と1を選択した場合はabcdと表示 のように選択した値によって表示される文章を変えたいのですが猫と0を選択して入力ボタンを押してもasddが表示されません
回答1件
0
ベストアンサー
受信側で文字列の結合は必要ですが、
valueを変更いただくことで選択内容に合わせて受信いただけると思います。
(Javascriptを利用しないですが,,,)
ラジオボタンについては、猫のvalue="as" 犬のvalue="ab"
html
1 <label> 2 <input 3 type="radio" 4 name="cat" 5 value="as" 6 checked="checked" 7 onclick="entryChange1()" 8 />猫 9 </label> 10 <label> 11 <input 12 type="radio" 13 name="cat" 14 value="ab" 15 onclick="entryChange1()" 16 17 />犬 18 </label>
セレクトリストについては、0のvalue="dd" 1のvalue="cd"
html
1 <select name="CATage" onChange="number02()"> 2 <option value="dd">0</option> 3 <option value="cd">1</option> 4 // 以下略 5 </select>
上記のようにするのはいかがでしょうか？
追記
問題なく動作しているソースを記入しておきます。
ご参考になれば幸いです。(一部ソースの記述変更していますがm(_ _)m)
画面側
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6</head> 7 8<body> 9 <form action="http://localhost:7071/api/test" method="GET"> ←例のため記載しておきます。送信先は適宜変更してください。 10 <table border="0" cellspacing="0" cellpadding="0"> 11 <tr> 12 <th>猫or犬</th> 13 <td> 14 <input type="radio" name="pet" value="as" onchange="createAgeSelectList()"> 15 猫 16 </input> 17 <input type="radio" name="pet" value="ad" checked onchange="createAgeSelectList()">犬</input> 18 </td> 19 </tr> 20 <!--上記の選択内容によってoption value選択肢を変更する--> 21 <br> 22 <tr> 23 <th>年齢</th> 24 <td> 25 <select name="age" id="age"></select> 26 </td> 27 </tr> 28 </table> 29 <button>入力</button> 30 </form> 31 <script> 32 /** 猫年齢セレクトリスト */ 33 const CAT_LIST = [ 34 { value: 'dd', text: '0' }, 35 { value: 'cd', text: '1' }, 36 { value: 'bd', text: '2' }, 37 { value: 'ad', text: '3' }, 38 { value: 'zc', text: '4' }, 39 { value: 'yc', text: '5' }, 40 { value: 'xc', text: '6' }, 41 { value: 'wc', text: '7' }, 42 { value: 'vc', text: '8' }, 43 { value: 'uc', text: '9' }, 44 { value: 'tc', text: '10' }, 45 { value: 'sc', text: '11' }, 46 { value: 'rc', text: '12' }, 47 { value: 'qc', text: '13' }, 48 { value: 'pc', text: '14' } 49 ]; 50 /** 犬年齢セレクトリスト */ 51 const DOG_LIST = [ 52 { value: 'dd', text: '0' }, 53 { value: 'cd', text: '1' }, 54 { value: 'bd', text: '2' }, 55 { value: 'ad', text: '3' }, 56 { value: 'zc', text: '4' }, 57 { value: 'yc', text: '5' }, 58 { value: 'xc', text: '6' }, 59 { value: 'wc', text: '7' }, 60 { value: 'vc', text: '8' }, 61 { value: 'uc', text: '9' }, 62 { value: 'tc', text: '10' }, 63 { value: 'sc', text: '11' }, 64 { value: 'rc', text: '12' }, 65 { value: 'qc', text: '13' } 66 ]; 67 /** 初期表示処理 */ 68 window.onload = function () { 69 createAgeSelectList(); 70 }; 71 /** 年齢セレクトリスト生成 */ 72 function createAgeSelectList() { 73 // 選択中のラジオボタンを取得 74 const pets = document.getElementsByName('pet'); 75 let pet; 76 for (let i = 0; i < pets.length; i++) { 77 if (pets[i].checked) { 78 pet = pets[i].value; 79 break; 80 } 81 } 82 const targetList = pet === 'as' ? CAT_LIST : DOG_LIST; 83 const age = document.getElementById('age'); 84 // 表示中のセレクトリストの子要素を削除 85 while (age.lastChild) { 86 age.removeChild(age.lastChild) 87 } 88 // セレクトリスト子要素を追加 89 targetList.forEach(i => { 90 const option = document.createElement('option'); 91 option.setAttribute('value', i.value); 92 option.textContent = i.text; 93 age.appendChild(option); 94 }) 95 }; 96 </script> 97</body> 98 99</html>
動作確認のため、使用したAPI側(Azure Functionsを利用。ご参考までに...)
受け取り側で送信されてきた文字列を連結してあげれば、良いと思いました。
Typescript
1import { AzureFunction, Context, HttpRequest } from "@azure/functions" 2 3const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> { 4 const { pet, age } = req.query; 5 if (!pet || !age) { 6 context.res = { 7 status: 400, 8 body: "ペットまたは年齢が選択されていません。" 9 }; 10 return; 11 } 12 context.res = { 13 status: 200, 14 body: pet + age // このように受け取り側で文字列を連結してあげれば良いのではと思っています。 15 }; 16}; 17 18export default httpTrigger; 19
追記2
データ送信せず画面に表示するということであれば以下のようになるかと思いますがいかがでしょうか？
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6</head> 7 8<body> 9 <form action="#"> 10 <table border="0" cellspacing="0" cellpadding="0"> 11 <tr> 12 <th>猫or犬</th> 13 <td> 14 <input type="radio" name="pet" value="as" onchange="createAgeSelectList()" checked> 15 猫 16 </input> 17 <input type="radio" name="pet" value="ad" onchange="createAgeSelectList()">犬</input> 18 </td> 19 </tr> 20 <!--上記の選択内容によってoption value選択肢を変更する--> 21 <br> 22 <tr> 23 <th>年齢</th> 24 <td> 25 <select name="age" id="age"></select> 26 </td> 27 </tr> 28 </table> 29 <button type="button" onclick="onClickInput()">入力</button> 30 </form> 31 <div id="output"></div> 32 <script> 33 /** 猫年齢セレクトリスト */ 34 const CAT_LIST = [ 35 { value: 'dd', text: '0' }, 36 { value: 'cd', text: '1' }, 37 { value: 'bd', text: '2' }, 38 { value: 'ad', text: '3' }, 39 { value: 'zc', text: '4' }, 40 { value: 'yc', text: '5' }, 41 { value: 'xc', text: '6' }, 42 { value: 'wc', text: '7' }, 43 { value: 'vc', text: '8' }, 44 { value: 'uc', text: '9' }, 45 { value: 'tc', text: '10' }, 46 { value: 'sc', text: '11' }, 47 { value: 'rc', text: '12' }, 48 { value: 'qc', text: '13' }, 49 { value: 'pc', text: '14' } 50 ]; 51 /** 犬年齢セレクトリスト */ 52 const DOG_LIST = [ 53 { value: 'dd', text: '0' }, 54 { value: 'cd', text: '1' }, 55 { value: 'bd', text: '2' }, 56 { value: 'ad', text: '3' }, 57 { value: 'zc', text: '4' }, 58 { value: 'yc', text: '5' }, 59 { value: 'xc', text: '6' }, 60 { value: 'wc', text: '7' }, 61 { value: 'vc', text: '8' }, 62 { value: 'uc', text: '9' }, 63 { value: 'tc', text: '10' }, 64 { value: 'sc', text: '11' }, 65 { value: 'rc', text: '12' }, 66 { value: 'qc', text: '13' } 67 ]; 68 /** 初期表示処理 */ 69 window.onload = function () { 70 createAgeSelectList(); 71 }; 72 /** 年齢セレクトリスト生成 */ 73 function createAgeSelectList() { 74 const pets = document.getElementsByName('pet'); 75 // 選択中のペットの値を取得 76 const pet = getSelectedValue(pets, 'checked'); 77 const targetList = pet === 'as' ? CAT_LIST : DOG_LIST; 78 const age = document.getElementById('age'); 79 // 表示中のセレクトリストの子要素を削除 80 while (age.lastChild) { 81 age.removeChild(age.lastChild) 82 } 83 // セレクトリスト子要素を追加 84 targetList.forEach(i => { 85 const option = document.createElement('option'); 86 option.setAttribute('value', i.value); 87 option.textContent = i.text; 88 age.appendChild(option); 89 }) 90 }; 91 /** 入力ボタン押下時処理 */ 92 function onClickInput() { 93 const pets = document.getElementsByName('pet'); 94 // 選択中のペットの値を取得 95 const pet = getSelectedValue(pets, 'checked'); 96 const ageList = document.getElementsByName('age'); 97 // 選択中の年齢の値を取得 98 const age = getSelectedValue(ageList[0], 'selected'); 99 const output = document.getElementById('output'); 100 // 結果を表示 101 output.textContent = pet + age; 102 } 103 /** 選択中の値を取得 */ 104 function getSelectedValue(nodeList, decitionItemName) { 105 for (let i = 0; i < nodeList.length; i++) { 106 if (nodeList[i][decitionItemName]) { 107 return nodeList[i].value; 108 } 109 } 110 } 111 </script> 112</body> 113 114</html>
ご参考になれば幸いです。
投稿2021/01/29 17:58
編集2021/01/30 22:49総合スコア354
詳しくありがとうございます。
コピーさせていただいてしてみたのですが、入力ボタンを押しても送信ができなくなってしまいます。
前のコードだと入力ボタンを押すと何も選択していない状態に戻っていましたが入力ボタンを押しても猫と0を選択している状態のままで入力ボタンの縁が青い状態になってしまいます。
お時間がございましたらご返信いただけると幸いです。
<button>入力</button>のままだとちゃんと送信ができていますが、buttonにtype="button",onclick="number02()"を追加すると上記のようになってしまいます。
ご確認いただきありがとうございます！
「送信」ということであれば、<button>のままで良いと思います。
<button>のデフォルト設定(指定しない場合)が type="submit" となっていますので、送信されると思います。
失礼いたしました。
ご質問の意図を勘違いしておりました。
回答修正いたしますので、少々お待ちください。
ご返信ありがとうございます。
onclickはどこに書けばいいのでしょうか？
こちらのJavascriptを書くと何故か0を選択したときに送信が上手くいかないことがあります。
一度コード消してみてからしてみると0を選択して入力ボタンを押すと毎回送信されるのですが。
いろいろ調べてみたのですが原因が分からないです。
ご確認いただきありがとうございます！
ご質問の内容と上記を拝見させていただきfromを送信する場合、Javascirptを利用各入力内容のvalueを変更していただくだけで良いように感じます。
formの場合、name毎で送信されるため文字列の結合を受信側でする必要はありますが、、、
回答に反映いたします。
ありがとうございます。
Javascriptを使用しなくてもフォームから送られてきた値を識別して表示される文字を選択パターンによって変更することが可能なのですか？
フォームから送られた値を識別するわけではなく、フォームに送信させる値自体をhtmlで変えてしまえばすむのではと考えました。
フォームで送信される値は選択された要素タグのvalueになりますので、例えばラジオボタンの猫のvalueをasとして入力ボタン押下し送信するとasで送られます。
回答のソースをご確認いただければおわかりいただけると思います。
もし、回答がfthc様の想定されているものと異なる内容であればまたコメントいただければと思います。
試させていただきましたが何も変わらない状態です。。
ご確認いただきありがとうございます。
私の環境では、問題なく入力ボタン押下後、APIを呼び出し(php等の知識がないためAPIで試しました。)API側でラジオボタンとセレクトリストで選択したvalueを文字列結合し"asdd"と画面に表示されました。
ちなみにformのactionには送信先が設定されてる認識であってますよね？
ご質問上のソースでは、action="#"となっていますが、
ありがとうございます。
画面を遷移しないままフォームの下に文を表示させたかったので何も指定していないのですがする必要があるのでしょうか？
先のコメントでは
> 入力ボタンを押しても送信ができなくなってしまいます。
とあったのですが、formでphpやAPIにデータを送信するのではないのでしょうか？
画面の仕様としては、formで入力したデータは送信せずに画面内のform下に入力した値に合わせて文字列を表示したいということでよろしいのでしょうか？
追記2を追加しました。
データを送信せずに画面状に表示するパターンになります。
その他の内容についても削除せずそのまま記載したままとしました。
お手数ですが、ご確認お願いいたします。
送信と勘違いしていました。
すみません。
表示をしたいです。
ありがとうございます。
試させていただきます。
ご連絡遅くなってしまい申し訳ございません。
無事表示することができました！
詳しくご解説してくださりありがとうございました。
function entryChange1() {
radio = document.createAgeSelectList('pet');
select = document.createAgeSelectList('age');
//猫を選択した場合
if (radio [0] .checked) {
document.getElementById('q3').style.display ="";
document.getElementById('q4').style.display ="none";
//犬を選択した場合
}else if(radio[1].checked) {
document.getElementById('q3').style.display ="none";
document.getElementById('q4').style.display ="";
}
}
radioで猫を選択した場合はDOG_LISTを、犬を選択した場合はCAT_LISTを非表示にしたいのですが考えてみてもそれぞれにnameまたはidがないためdocument.getElement
を指定できないため出来ません。
後からすみません。
犬を選択したときは13までのselectを猫を選択したときは14までのselectをそれぞれ表示したいのですが、犬と猫どちらも14までのselectになっています。
もしお時間がございましたらご返信いただけると幸いです
ご確認をいただきありがとうございます！
解決され何よりです。
追加でいただいたコメント(質問)ですが、私が回答であげたソースとは状況が異なるようです。
お手数なのですが、ご質問を改めて投稿いただきソースを記載いただけないでしょうか？
HTMLも含めてみてみないことには、コメントで回答をすることが難しいですm(_ _)m
ちなみに私が追記2で例としてあげさせていただいたソースでは、猫は14・犬は13となっていることを確認しています。
私のミスでした。すみません！
ご返信頂きありがとうございます。
あなたの回答
tips
プレビュー
