Q&A
htmlでrequired属性のついたinputタグをJSで制御したいのですが、良い方法を教えてください。
やりたいこと
以下の入力フォーム(テーブルで整えています。)があり、ラジオボタン(A,B)より選択したフォームのみ表示したいです。注意点として入力欄Bのタグにはrequired属性のあるタグがあり、入力しないと送信できないようにしています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="text/javascript"> 5 </script> 6 </head> 7 8 <body> 9 <form action="hoge" method="post"> 10 <table> 11 <tr> 12 <th>切替</th> 13 <td> 14 <label> 15 <input type="radio" name="class" value="0" checked="checked"> 16 Aを表示 17 </label> 18 <label> 19 <input type="radio" name="class" value="1"> 20 Bを表示 21 </label> 22 </td> 23 </tr> 24 <tr> 25 <th>A</th> 26 <td><input type="text"/></td> 27 </tr> 28 <tr> 29 <th>B</th> 30 <td><input type="text" required/></td> 31 </tr> 32 <tr> 33 <td><input type="submit" value="submit"></td> 34 </tr> 35 </table> 36 </form> 37 </body> 38</html>
実装
いまのところdisplayによる表示切替制御を考えましたが、これだとブラウザで表示されないだけで、見えてなくても裏でrequiredが有効になっているみたいでした。結局表面上Aを選択したところで、Bにも入力していないといけないみたいなんで詰んでます。
以下、上記の変更箇所だけ記述
html
1// javascript 2<script type="text/javascript"> 3 function toggle() { 4 var isChecked = document.getElementById("radio").checked 5 var aElems = document.getElementsByClassName("a") 6 var bElems = document.getElementsByClassName("b") 7 if (isChecked) { 8 aElems[0].style.display = "" 9 bElems[0].style.display = "none" 10 } 11 }else { 12 aElems[0].style.display = "none" 13 bElems[0].style.display = "" 14 15 } 16 } 17</script> 18 19// イベント 20<label> 21 <input id="radio" type="radio" name="class" value="0" checked="checked" onclick="toggle()"> 22 Aを表示 23</label> 24<label> 25 <input type="radio" name="class" value="1" onclick="toggle()"> 26 Bを表示 27</label> 28 29<tr class="a"> 30 <th>A</th> 31 <td><input type="text"/></td> 32</tr> 33<tr class="b"> 34 <th>B</th> 35 <td><input type="text" required/></td> 36</tr>
ラジオボタンをイベントハンドラとして、Aを選択したときには必須項目のBのテーブルレコードを消し去りたいのですが他に方法はないでしょうか？
補足(縛り)
応急処置として、jsのif処理の最後に
bElems[0].children[1].children[0].value="null"(Aが選択された場合)
bElems[0].children[1].children[0].value=""(Bが選択された場合)
みたいに文字列を入れてごまかすことはできますが、これだとAを選択して送信した場合、form先にBのvalueに"null"が入って送られてしまうので避けたいです。
回答1件
0
ベストアンサー
無効にしたコントロールは検証されないし、送信もされません。
JavaScript
1 aElems[0].querySelector('input').disabled = false; 2 bElems[0].querySelector('input').disabled = true;
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
投稿2020/04/08 09:07
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/08 11:15