・ラジオボタン「投稿」がチェックされている状態の場合は非表示
・「更新」「削除」がチェックされた場合のみ表示
・未チェックのままボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、下記コードの場合だとラジオボタンの「onchange="change()"」を適用したいコードに張り付ければ、Java~の処理通りに動作するという事は把握してます
今回ラジオボタンの選択で同時に処理したい箇所が大きく2箇所あって、1つ目は「function change」のコード、2つ目は「function indication」のコードです
イメージとして「~change」でsubmitボタンの表示される値をラジオボタンの種類毎に各値に変更、「~indication」でラジオボタンの種類毎にチェックボックスを表示・非表示という風にしたいんです
下記コードの状態だと「~change」の処理しか行われず、「indication」は何も処理されません
ラジオボタンの処理を同時に行うにはどうすればいいのでしょうか
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 (radiob[0].checked == true) { 31 document.getElementById("send").value = "投稿"; 32 } else if (radiob[1].checked == true) { 33 document.getElementById("send").value = "更新"; 34 } else if (radiob[2].checked == true) { 35 document.getElementById("send").value = "削除"; 36 } 37 } 38 function indication() { 39 document.getElementById('r1').onClick = function() { 40 document.getElementById('chkb').disabled = false; 41 } 42 document.getElementById('r2').onClick = function() { 43 document.getElementById('chkb').disabled = true; 44 } 45 document.getElementById('r3').onClick = function() { 46 document.getElementById('chkb').disabled = true; 47 } 48 } 49 function nochk() { 50 var up = document.getElementById("r2").checked 51 var de = document.getElementById("r3").checked 52 var chkvalue = ""; 53 obj = document.getElementById("chkb"); 54 if (obj.checked == true) { 55 chkvalue += obj.value; 56 num++; 57 if (up == true) { 58 document.getElementById("send").name = "upd"; 59 } else if (de == true) { 60 document.getElementById("send").name = "del"; 61 } 62 } 63 if (num == 0) { 64 window.alert("ERROR"); 65 } 66 } 67 </script> 68 </head> 69 <body> 70 <form method="post" action="" name="form" onsubmit="return Condition()"> 71 <table> 72 <tr> 73 <td> 74 名前:<input type="text" name="name" id="name"> 75 内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> 76 <input type="radio" name="bbs" id="r1" value="post" onchange="change()">投稿 77 <input type="radio" name="bbs" id="r2" value="update" onchange="change()">更新 78 <input type="radio" name="bbs" id="r3" value="delete" onchange="change()">削除 79 <input type="submit" value="投稿" id="send"> 80 </td> 81 </tr> 82 </table> 83 84<?php 85 while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 86?> 87 88 <table> 89 <input type="checkbox" name="chkid[]" id="chkb" value="<?=$row['id'] ?>"> 90 <tr> 91 <td>名前: 92 <?php echo $row['name'] ?> 93 </td> 94 </tr> 95 <tr> 96 <td>内容: 97 <?php echo $row['comment'] ?> 98 </td> 99 </tr> 100 </table> 101 102<?php 103 } 104 mysqli_free_result($result); 105 106 mysqli_close($link); 107?> 108 109 </form> 110 </body> 111</html>
回答1件
あなたの回答
tips
プレビュー