・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、アラート表示(ERROR5)の条件がうまく処理できません
else if (up.checked == true || de.checked == true)の箇所についてなんですが、下記の流れで処理されると解釈しています
・条件式は変数up又はdeがチェックされた場合はtrue、変数caはchk[] という name属性 を持つ要素を配列で取得、変数boxはチェックされたチェックボックスの数、for文中ではcaは配列なので、ループの中で 1つずつチェックされているか判定、更にif文中でcaがcb分チェックされていれば変数boxにcb分チェックされたcaを代入、もし変数boxが0に等しい場合にはERROR5を表示
・関数conditionの処理が全て行われるタイミングはフォームタグのreturn conditionで実行
という流れと考えましたが、いくら調べたり、アドバイスをいただいても改善しません
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 == "") { 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 == "") { 20 window.alert("ERROR4"); 21 return false; 22 } 23 } else if (up.checked == true || de.checked == true) { 24 var ca = document.getElementsByName('chkid[]'); 25 var box = ""; 26 for(var cb = 0; cb < ca.length; cb++) { 27 if (ca[cb].checked) { 28 box = ca[cb]; 29 } 30 } 31 if (box == 0) { 32 window.alert("ERROR5"); 33 return false; 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="" name="fn" 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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。