Q&A
サンプルまで丁寧に……
サンプルみたら、期待した動きをしていたので、参考にしてコードを直します
ありがとうございました
やりたいこと
現在、新規登録画面を作成しています
submitが行われた時に,各科目radioボタンのvalue値を計算しようとしたところ
input内のnameを毎回
document.getElementsByName("database");
のように取得すれば、実装は可能なのですが
class="gpa"を基準として
radioのvalueを取得する方法がわからなくて困ってあります
期待する結果は
classを基準として
document.getElementsByName("gpa").length 回
ループしてradio内のvalueの合計を表示することです
よろしくお願いします
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ログイン画面</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function count() { var radios = document.getElementsByName("database"); var result; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { result = radios[i].value; break; } } //value値を表示する alert("value値は" + result + "です"); } </script> </head> <body> <form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form"> <table id="insert"> <thead> <tr> <th>科目情報</th> <th>成績評価</th> </tr> </thead> <tbody> <tr> <td>データベース</td> <td class="gpa"> <input type="radio" id="zero_database" name="database" value="0"> <label for="zero_database">不可</label> <input type="radio" id="one_database" name="database" value="1"> <label for="one_database">可</label> <input type="radio" id="two_database" name="database" value="2"> <label for="two_database">良</label> <input type="radio" id="three_database" name="database" value="3"> <label for="three_database">優</label> <input type="radio" id="four_database" name="database" value="4"> <label for="four_database">秀</label> <input type="radio" id="none_database" name="database"> <label for="none_database">取得していない</label> <input type="hidden" class="count" value="2"> </td> </tr> <tr> <td>微積分</td> <td class="gpa"> <input type="radio" id="zero_Calculus" name="Calculus" value="0"> <label for="zero_Calculus">不可</label> <input type="radio" id="one_Calculus" name="Calculus" value="1"> <label for="one_Calculus">可</label> <input type="radio" id="two_Calculus" name="Calculus" value="2"> <label for="two_Calculus">良</label> <input type="radio" id="three_Calculus" name="Calculus" value="3"> <label for="three_Calculus">優</label> <input type="radio" id="four_Calculus" name="Calculus" value="4"> <label for="four_Calculus">秀</label> <input type="radio" id="none_Calculus" name="Calculus"> <label for="none_Calculus">取得していない</label> <input type="hidden" class="count" value="1"> </td> </tr> </tbody> </table> <input type="submit" value="送信"> </form> </body> </html>
回答2件
0
HTMLFormElement.elements
見たところ、[name="database"] は .gpa 直下にしか存在しないので、classで制限するまでもなく、下記コードでいいのではないでしょうか。
JavaScript
1document.getElementById('insert_form').elements['database']
querySelectorAll
class で制限するなら、querySelectorAll を使ってください。
JavaScript
1document.querySelectorAll('.gpa>[name="database"]')
FormData
IE11- 用に Polyfill が必要ですが、FormData を使うと、楽ですね。
HTML
1<form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form"> 2 <table id="insert"> 3 <thead> 4 <tr> 5 <th>科目情報</th> 6 <th>成績評価</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>データベース</td> 12 <td class="gpa"> 13 <input type="radio" id="zero_database" name="database" value="0" checked> 14 <label for="zero_database">不可</label> 15 <input type="radio" id="one_database" name="database" value="1"> 16 <label for="one_database">可</label> 17 <input type="radio" id="two_database" name="database" value="2"> 18 <label for="two_database">良</label> 19 <input type="radio" id="three_database" name="database" value="3"> 20 <label for="three_database">優</label> 21 <input type="radio" id="four_database" name="database" value="4"> 22 <label for="four_database">秀</label> 23 <input type="radio" id="none_database" name="database"> 24 <label for="none_database">取得していない</label> 25 26 <input type="hidden" class="count" value="2"> 27 </td> 28 </tr> 29 <tr> 30 <td>微積分</td> 31 <td class="gpa"> 32 <input type="radio" id="zero_Calculus" name="Calculus" value="0" checked> 33 <label for="zero_Calculus">不可</label> 34 <input type="radio" id="one_Calculus" name="Calculus" value="1"> 35 <label for="one_Calculus">可</label> 36 <input type="radio" id="two_Calculus" name="Calculus" value="2"> 37 <label for="two_Calculus">良</label> 38 <input type="radio" id="three_Calculus" name="Calculus" value="3"> 39 <label for="three_Calculus">優</label> 40 <input type="radio" id="four_Calculus" name="Calculus" value="4"> 41 <label for="four_Calculus">秀</label> 42 <input type="radio" id="none_Calculus" name="Calculus"> 43 <label for="none_Calculus">取得していない</label> 44 45 <input type="hidden" class="count" value="1"> 46 </td> 47 </tr> 48 </tbody> 49 </table> 50 <input type="submit" value="送信"> 51</form> 52 53<script> 54'use strict'; 55var formData = new FormData(document.getElementById('insert_form')); 56console.log(formData.get('database')); // "0" 57console.log(formData.get('Calculus')); // "0" 58</script>
Re: imaharu さん
投稿2017/08/16 13:33
編集2017/08/16 14:02
総合スコア18189
0
ベストアンサー
JavaScript
1document.addEventListener( 'DOMContentLoaded' , e => { 2 document.querySelector( 'form' ).addEventListener( 'submit', check, false ); 3 function check( e ) { 4 let v = 0; 5 e.preventDefault() 6 document.querySelectorAll( '.gpa input[type="radio"]:checked' ).forEach( e => { 7 if ( e.value && e.value > 0 ) v += parseInt( e.value, 10 ); 8 } ); 9 console.log( v ); 10 } 11}, false ); 12```**動くサンプル：**[https://jsfiddle.net/m7dtdq7h/](https://jsfiddle.net/m7dtdq7h/)
投稿2017/08/16 13:37
編集2017/08/16 13:38
総合スコア69612
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/16 13:43
2017/08/16 13:49