質問編集履歴

2 改善

a-_.

a-_. score 133

2016/09/06 11:37  投稿

JavaScript valueの特定
・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、「未チェックのままsubmitボタンを押下した場合はエラー」(else if (up.checked == true || de.checked == true)のコード)の処理に不備があるようで、box = box + document.ca.elements[cb].value;のvalue値を変数boxに入れる為に書いてるのに、valueがどのvalue値を指してるのか定義されてないのでエラーが発生してる、と考えたんですが、それでfalseの処理は動作するんでしょうか
あとvalueの特定のやり方として、var option = document.myForm.mySelect.options;みたく、変数を追加してから「どのタグの中のどのタグの~」と範囲を限定的にする書き方があるらしいんですが、この書き方で下記コードの特定する処理は成立するんでしょうか
[リンク内容](http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12145505497)
```HTML
<html>
<head>
<meta charset="utf-8">
<script>
function condition() {
var ps = document.getElementById("r1");
var up = document.getElementById("r2");
var de = document.getElementById("r3");
if (ps.checked == true || up.checked == true) {
if (document.getElementById('name').value.length >= 10) {
window.alert("ERROR1");
return false;
} else if (document.getElementById('name').value == "") {
window.alert("ERROR2");
return false;
} else if (document.getElementById('comment').value.length >= 300) {
window.alert("ERROR3");
return false;
} else if (document.getElementById('comment').value == "") {
window.alert("ERROR4");
return false;
}
} else if (up.checked == true || de.checked == true) {
ca = document.getElementsByName('chkid[]');
var box = "";
for(var cb = 0; cb < ca.length; cb++) {
if (document.ca.elements[cb].checked) {
box = box + document.ca.elements[cb].value;
}
return true;
}
if (box == "") {
window.alert("ERROR5");
return false;
}
}
}
function change(obj) {
console.log(obj.id);
if (obj.id == "r1") {
document.getElementById("send").value = "投稿";
chkchange(true);
} else if (obj.id == "r2") {
document.getElementById("send").value = "更新";
chkchange(false);
} else if (obj.id == "r3") {
document.getElementById("send").value = "削除";
chkchange(false);
}
}
function chkchange(bool) {
chk = document.getElementsByName('chkid[]');
for(var box = 0; box < chk.length; box++) {
console.log(chk[box]);
console.log(box);
chk[box].disabled = bool;
}
}
</script>
</head>
<body>
<form method="post" action="" name="fn" onsubmit="return condition()">
<table>
<tr>
<td>
名前:<input type="text" name="name" id="name">
内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
<input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
<input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
<input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
<input type="submit" value="投稿" id="send">
</td>
</tr>
</table>
<?php
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
<table>
<input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
<tr>
<td>名前:
<?php echo $row['name'] ?>
</td>
</tr>
<tr>
<td>内容:
<?php echo $row['comment'] ?>
</td>
</tr>
</table>
<?php
}
mysqli_free_result($result);
mysqli_close($link);
?>
</form>
</body>
</html>
```
  • PHP

    37390 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    36505 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23430 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1 改善

a-_.

a-_. score 133

2016/09/02 14:10  投稿

JavaScript valueの特定
・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止   
という条件をJavaScriptのみで処理したいんですが、「未チェックのままsubmitボタンを押下した場合はエラー」(else if (up.checked == true || de.checked == true)のコード)の処理に不備があるようで、box = box + document.ca.elements[cb].value;のvalue値を変数boxに入れる為に書いてるのに、valueがどのvalue値を指してるのか定義されてないのでエラーが発生してる、と考えたんですが、それでfalseの処理は動作するんでしょうか
あとvalueの特定のやり方として、var option = document.myForm.mySelect.options;みたく、変数を追加してから「どのタグの中のどのタグの~」と範囲を限定的にする書き方があるらしいんですが、この書き方で下記コードの特定する処理は成立するんでしょうか
[リンク内容](http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12145505497)  
```HTML
<html>
   <head>
       <meta charset="utf-8">
       <script>
           function condition() {
               var ps = document.getElementById("r1");
               var up = document.getElementById("r2");
               var de = document.getElementById("r3");
               if (ps.checked == true || up.checked == true) {
                   if (document.getElementById('name').value.length >= 10) {
                       window.alert("ERROR1");
                       return false;
                   } else if (document.getElementById('name').value == "") {
                       window.alert("ERROR2");
                       return false;
                   } else if (document.getElementById('comment').value.length >= 300) {
                       window.alert("ERROR3");
                       return false;
                   } else if (document.getElementById('comment').value == "") {
                       window.alert("ERROR4");
                       return false;
                   }
               } else if (up.checked == true || de.checked == true) {
                   ca = document.getElementsByName('chkid[]');
                   var box = "";
                   for(var cb = 0; cb < ca.length; cb++) {
                       if (document.ca.elements[cb].checked) {
                           box = box + document.ca.elements[cb].value;
                       }
                       return true;
                   }
                   if (box == "") {
                       window.alert("ERROR5");
                       return false;
                   }
               }
           }
           function change(obj) {
               console.log(obj.id);
               if (obj.id == "r1") {
                   document.getElementById("send").value = "投稿";
                   chkchange(true);
               } else if (obj.id == "r2") {
                   document.getElementById("send").value = "更新";
                   chkchange(false);
               } else if (obj.id == "r3") {
                   document.getElementById("send").value = "削除";
                   chkchange(false);
               }
           }
           function chkchange(bool) {
               chk = document.getElementsByName('chkid[]');
               for(var box = 0; box < chk.length; box++) {
                   console.log(chk[box]);
                   console.log(box);
                   chk[box].disabled = bool;
               }
           }
       </script>
   </head>
   <body>
       <form method="post" action="" name="fn" onsubmit="return condition()">
           <table>
               <tr>
                   <td>
                       名前:<input type="text" name="name" id="name">
                       内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
                       <input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
                       <input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
                       <input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
                       <input type="submit" value="投稿" id="send">
                   </td>
               </tr>
           </table>
<?php
           while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
           <table>
               <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
               <tr>
                   <td>名前:
                       <?php echo $row['name'] ?>
                   </td>
               </tr>
               <tr>
                   <td>内容:
                       <?php echo $row['comment'] ?>
                   </td>
               </tr>
           </table>
<?php
           }
           mysqli_free_result($result);
           mysqli_close($link);
?>
       </form>
   </body>
</html>
```
  • PHP

    37390 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    36505 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23430 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る