・ラジオボタン「投稿」がチェックされている状態の場合はチェックボックス非表示
・ラジオボタン「更新」「削除」がチェックされた場合のみチェックボックス表示
・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、ブラウザ表示してラジオボタンのps・up・deを選択し、psとupだったら条件以外の場合ERROR1~4を表示、upとdeを選択中chkid[](チェックボックス)をチェックしなかったらERROR5を表示という動作を追加したいんです
今のコードだと一応動作は出来るけど、チェックボックスにチェックをいれてもERROR5が表示されないため今ここで何が処理されてるのか確認したいんです
あと解読しきれていないconsole.logのコードがあるんですが、私の解釈としては
console.log(cde[bde]);
console.log(bde);
cde[bde].disabled = false;
return false;
・cde(=obj)はbdeの数だけ出力
・bdeをループ出力
・cde[bde]が選択できなかったらfalse
・submit処理を止めるためfalseとして返す
という解釈をしてるんですが、その考え方は合ってるんでしょうか
HTML
1<html> 2 <head> 3 <meta charset="utf-8"> 4 <script> 5 function condition() { 6 var ps = document.getElementById("r1"); 7 var up = document.getElementById("r2"); 8 var de = document.getElementById("r3"); 9 if (ps.checked == true || up.checked == true) { 10 if (document.getElementById('name').value.length >= 10) { 11 window.alert("ERROR1"); 12 return false; 13 } else if (document.getElementById('name').value.length == "") { 14 window.alert("ERROR2"); 15 return false; 16 } else if (document.getElementById('comment').value.length >= 300) { 17 window.alert("ERROR3"); 18 return false; 19 } else if (document.getElementById('comment').value.length == "") { 20 window.alert("ERROR4"); 21 return false; 22 } 23 } 24 if (up.checked == true || de.checked == true) { 25 cde = document.getElementsByName('chkid[]'); 26 for(var bde = 0; bde < cde.length; bde++) { 27 console.log(cde[bde]); 28 console.log(bde); 29 cde[bde].disabled = false; 30 return false; 31 } 32 if (bde == 0) { 33 window.alert ("ERROR5"); 34 } 35 } 36 } 37 function change(obj) { 38 console.log(obj.id); 39 if (obj.id == "r1") { 40 document.getElementById("send").value = "投稿"; 41 chkchange(true); 42 } else if (obj.id == "r2") { 43 document.getElementById("send").value = "更新"; 44 chkchange(false); 45 } else if (obj.id == "r3") { 46 document.getElementById("send").value = "削除"; 47 chkchange(false); 48 } 49 } 50 function chkchange(bool) { 51 chk = document.getElementsByName('chkid[]'); 52 for(var box = 0; box < chk.length; box++) { 53 console.log(chk[box]); 54 console.log(box); 55 chk[box].disabled = bool; 56 } 57 } 58 </script> 59 </head> 60 <body> 61 <form method="post" action="" onsubmit="return condition()"> 62 <table> 63 <tr> 64 <td> 65 名前:<input type="text" name="name" id="name"> 66 内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> 67 <input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿 68 <input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新 69 <input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除 70 <input type="submit" value="投稿" id="send"> 71 </td> 72 </tr> 73 </table> 74 75<?php 76 while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 77?> 78 79 <table> 80 <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>"> 81 <tr> 82 <td>名前: 83 <?php echo $row['name'] ?> 84 </td> 85 </tr> 86 <tr> 87 <td>内容: 88 <?php echo $row['comment'] ?> 89 </td> 90 </tr> 91 </table> 92 93<?php 94 } 95 mysqli_free_result($result); 96 97 mysqli_close($link); 98?> 99 100 </form> 101 </body> 102</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/31 06:50
2016/08/31 07:00
2016/08/31 07:04
2016/08/31 07:29
2016/08/31 07:48
2016/08/31 07:53
2016/08/31 08:37 編集
2016/09/01 02:04
2016/09/01 02:11
2016/09/01 06:30
2016/09/01 07:11