・ラジオボタン「投稿」がチェックされている状態の場合は非表示
・「更新」「削除」がチェックされた場合のみ表示
・未チェックのままボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、下記コードの場合だとラジオボタンの「onchange="change()"」を適用したいコードに張り付ければ、Java~の処理通りに動作するという事は把握してます
今回ラジオボタンの選択で同時に処理したい箇所が「function change~」のコードです
イメージとしてsubmitボタンに表示される値をラジオボタンの種類名毎に変更という点とラジオボタンの種類毎にチェックボックスを表示・非表示という風にしたいんです
一応submitボタン改名の件は処理できてる様子なんですが、問題があるのはチェックボックスの処理です
下記コードの状態だと「投稿」のみ非表示処理をし、「更新・削除」は表示処理されません
また、ラジオボタンの投稿選択時に一番上に表示されているチェックボックスのみ作動し、その他のチェックボックスには何の動作も確認できませんでした
ラジオボタンの処理を同時に行うにはどうすればいいのでしょうか
HTML
1<html> 2 <head> 3 <meta charset="utf-8"> 4 <script> 5 function condition() { 6 var de = document.getElementById("r3").checked; 7 var up = document.getElementById("r2").checked; 8 if (de == false) { 9 if (document.getElementById('name').value.length < 10) { 10 window.alert("ERROR"); 11 return false; 12 } else if (document.getElementById('name').value.length == "") { 13 window.alert("ERROR"); 14 return false; 15 } else if (document.getElementById('comment').value.length < 300) { 16 window.alert("ERROR"); 17 return false; 18 } else if (document.getElementById('comment').value.length == "") { 19 window.alert("ERROR"); 20 return false; 21 } else if (up == true) { 22 nochk(); 23 } 24 } else { 25 nochk(); 26 } 27 } 28 function change() { 29 var radiob = document.getElementsByName('bbs'); 30 if (document.getElementById("r1").checked) { 31 document.getElementById("send").value = "投稿"; 32 document.getElementById('chkb').disabled = true; 33 } else if (document.getElementById("r2").checked) { 34 document.getElementById("send").value = "更新"; 35 document.getElementById('chkb').disabled = false; 36 } else if (document.getElementById("r3").checked) { 37 document.getElementById("send").value = "削除"; 38 document.getElementById('chkb').disabled = false; 39 } 40 } 41 </script> 42 </head> 43 <body> 44 <form method="post" action="" name="form" onsubmit="return condition()"> 45 <table> 46 <tr> 47 <td> 48 名前:<input type="text" name="name" id="name"> 49 内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> 50 <input type="radio" name="bbs" id="r1" value="post" onchange="change()">投稿 51 <input type="radio" name="bbs" id="r2" value="update" onchange="change()">更新 52 <input type="radio" name="bbs" id="r3" value="delete" onchange="change()">削除 53 <input type="submit" value="投稿" id="send"> 54 </td> 55 </tr> 56 </table> 57 58<?php 59 while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 60?> 61 62 <table> 63 <input type="checkbox" name="chkid[]" id="chkb" value="<?=$row['id'] ?>"> 64 <tr> 65 <td>名前: 66 <?php echo $row['name'] ?> 67 </td> 68 </tr> 69 <tr> 70 <td>内容: 71 <?php echo $row['comment'] ?> 72 </td> 73 </tr> 74 </table> 75 76<?php 77 } 78 mysqli_free_result($result); 79 80 mysqli_close($link); 81?> 82 83 </form> 84 </body> 85</html>
回答4件
あなたの回答
tips
プレビュー