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;みたく、変数を追加してから「どのタグの中のどのタグの～」と範囲を限定的にする書き方があるらしいんですが、この書き方で下記コードの特定する処理は成立するんでしょうか
リンク内容

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					ca = document.getElementsByName('chkid[]');
25					var box = "";
26					for(var cb = 0; cb < ca.length; cb++) {
27						if (document.ca.elements[cb].checked) {
28							box = box + document.ca.elements[cb].value;
29						}
30						return true;
31					}
32					if (box == "") {
33						window.alert("ERROR5");
34						return false;
35					}
36				}
37			}
38			function change(obj) {
39				console.log(obj.id);
40				if (obj.id == "r1") {
41					document.getElementById("send").value = "投稿";
42					chkchange(true);
43				} else if (obj.id == "r2") {
44					document.getElementById("send").value = "更新";
45					chkchange(false);
46				} else if (obj.id == "r3") {
47					document.getElementById("send").value = "削除";
48					chkchange(false);
49				}
50			}
51			function chkchange(bool) {
52				chk = document.getElementsByName('chkid[]');
53				for(var box = 0; box < chk.length; box++) {
54					console.log(chk[box]);
55					console.log(box);
56					chk[box].disabled = bool;
57				}
58			}
59		</script>
60	</head>
61	<body>
62		<form method="post" action=""  name="fn" onsubmit="return condition()">
63			<table>
64				<tr>
65					<td>
66						名前：<input type="text" name="name" id="name">
67						内容：<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
68						<input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
69						<input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
70						<input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
71						<input type="submit" value="投稿" id="send">
72					</td>
73				</tr>
74			</table>
75
76<?php
77			while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
78?>
79
80			<table>
81				<input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
82				<tr>
83					<td>名前：
84						<?php echo $row['name'] ?>
85					</td>
86				</tr>
87				<tr>
88					<td>内容：
89						<?php echo $row['comment'] ?>
90					</td>
91				</tr>
92			</table>
93
94<?php
95			}
96			mysqli_free_result($result);
97
98			mysqli_close($link);
99?>
100
101		</form>
102	</body>
103</html>

yambejp

2016/09/02 05:15

質問がぶれるのでPHPの部分はベタのHTMLでサンプルを書いてください、前回の私の回答が参考になると思います

a-_.

2016/09/02 05:32

>ベタのHTML どういう意味でしょうか？

yambejp

2016/09/02 05:45

回答者の環境で再現できないPHPを書かずにHTMLで書いてくださいということ

行動規範の内容に同意します

回答4件

未解決の前の質問も残ってるのでそれをまず処理してから質問したほうがいいと思いますよ。質問してそれを理解せずに次に進もうとするから芋づる式に問題が増えていってわけがわからなくなってるのだと思います。あせらず落ち着いて前の質問の解答を参考にコードをよく見て一つ一つ処理していってください。そして**「～でしょうか」**ではなくやってみて「できなかったです」などという結果を言ったほうがいいと思います。この書き方では丸投げに見えます。

投稿2016/09/02 06:02

toutou

総合スコア2050

ベストアンサー

jQueryを使わないバージョンです。
今後javascriptの質問に無駄にPHPを混ぜ込まないでください

javascript
1<script>
2try{
3document.addEventListener ('click',function(e){myfunc(e)},true);
4document.addEventListener ('submit',function(e){myfunc(e)},true);
5}catch(e){
6document.attachEvent('onclick',function(e){myfunc(e)});
7document.attachEvent('onsubmit',function(e){myfunc(e)});
8}
9window.onload=function(){
10  change();
11}
12function myfunc(e){
13  var t = (e.srcElement || e.target);
14  if(e.type=="submit"){
15    if(!condition()){
16      console.log("ng");
17      e.preventDefault();
18    }
19  }
20  if(e.type=="click" && t.nodeName=="INPUT" && t.type=="radio" && t.name=="bbs"){
21    change();
22  }
23}
24function condition() {
25  var ps = document.getElementById("r1");
26  var up = document.getElementById("r2");
27  var de = document.getElementById("r3");
28  if(ps.checked || up.checked){
29    with(document.getElementById('name')){
30      if(value.length >= 10) {
31        alert("ERROR1");
32        return false;
33      }
34      if (value === "") {
35        alert("ERROR2");
36        return false;
37      }
38    }
39    with(document.getElementById('comment')){
40      if(value.length >= 300) {
41        alert("ERROR3");
42        return false;
43      }
44      if (value === "") {
45        alert("ERROR4");
46        return false;
47      }
48    }
49  }
50  if(up.checked || de.checked){
51    var chks=document.getElementsByName("chkid[]");
52    var checkedflg=false;
53    for(var i=0;i<chks.length;i++){
54      if(chks[i].checked){
55        checkedflg=true;
56        break;
57      }
58    }
59    if(!checkedflg){
60      alert("ERROR5");
61      return false;
62    }
63  }
64  return true;
65}
66function change() {
67  var myid="r1";
68  var bbs=document.getElementsByName("bbs");
69  for(var i=0;i<bbs.length;i++){
70    if(bbs[i].checked){
71      myid=bbs[i].id;
72      break;
73    }
74  }
75  var sendlist={
76    "r1":{"text":"投稿",checkflg:true},
77    "r2":{"text":"更新",checkflg:false},
78    "r3":{"text":"削除",checkflg:false},
79    };
80  document.getElementById("send").value=sendlist[myid].text;
81  var chks=document.getElementsByName("chkid[]");
82  for(var i=0;i<chks.length;i++){
83    chks[i].disabled=sendlist[myid].checkflg;
84  }
85}
86</script>

HTML
1<form method="post" name="fn">
2名前：<input type="text" name="name" id="name">
3内容：<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
4<input type="radio" name="bbs" id="r1" value="post" checked>投稿
5<input type="radio" name="bbs" id="r2" value="update">更新
6<input type="radio" name="bbs" id="r3" value="delete">削除
7<input type="submit" value="投稿" id="send">
8<table>
9<tr>
10<td><input type="checkbox" name="chkid[]" value="1"></td>
11<td>名前：name1</td>
12<td>内容：content1</td>
13</tr>
14<tr>
15<td><input type="checkbox" name="chkid[]" value="2"></td>
16<td>名前：name2</td>
17<td>内容：content2</td>
18</tr>
19<tr>
20<td><input type="checkbox" name="chkid[]" value="3"></td>
21<td>名前：name3</td>
22<td>内容：content3</td>
23</tr>
24</table>
25</form>

投稿2016/09/02 05:48

yambejp

総合スコア114769

a-_.

2016/09/02 06:08

ご回答ありがとうございます何故PHPの部分はベタのHTMLでサンプルを書かないと、質問がぶれるとお考えになったのでしょうか

yambejp

2016/09/02 06:15

１）そもそもがここのところずっと続く質問が「PHP」の質問ではないため２）PHPの部分に問題があるかどうか検証しないといけないため３）そもそも質問者と同じ環境はつくれないので、回答者はmysqlからデータを取り出せないため４）回答者側が「きっとこんなデータだろう」というダミーデータを自分で用意しないといけず、それがあっているかどうかもわからないため質問者さんが手抜きしてることで回答者は相当な負担を強いられてることを自覚してください

a-_.

2016/09/02 06:35

すいませんが、手抜きではなく他の言語に書き直すなんてやり方は存じ上げないのでたった今作成したコードを貼る事しかできませんその点ご了承いただければと存じます PHPに関しては出力関数のみですが、混在しているので一応PHPも含まれているという意味です私が根本的に行いたいのは「追加するだけ」であって、その他のコードは大幅に変更はしなくてよいのですもしもタグが紛らわしいとの事であれば外します

行動規範の内容に同意します

HTMLの部分では、idがr1,r2,r3であるのは「ラジオボタン」です。
ラジオボタンの場合、必ず１つが選択された状態になりますから、「未チェックのまま」というのは起こり得ません。

「チェックボックス未チェックのままsubmitボタンを押下」というコードを書く必要があるのであれば、まずHTMLでチェックボックスを作りましょう。

質問者が何をしたいのかが判りませんので、具体的な助言はできませんが、とにかく『HTMLとJavascriptが対応していないと、まともに動作する訳がない』事を理解してください。

投稿2016/09/02 05:48

coco_bauer

総合スコア6915

ですから、ca でループをまわしているのだから、
ca でとればいいのでは？
chkのとこはchk[box]でとってるじゃないですか…。

投稿2016/09/02 05:43

jm1156

総合スコア866

a-_.

2016/09/02 06:06

ご回答ありがとうございます >ca でループをまわしているのだから、 caでとればいいのでは valueをcaに変更させることで変数に入れられるという事をおっしゃっているのでしょうか

jm1156

2016/09/02 06:09

そう思うのであれば、やってみましょう。（なんかこのやりとり、どこかで…。 ^_^;)

a-_.

2016/09/02 06:24

すいませんもう少し明確に教えていただけると参考になります

jm1156

2016/09/02 08:44

caにはチェックボックスの配列がはいっていますよね？そしてそれをcbインデックスでループさせているわけです。では、そのループのなかで、caのチェックをみて、trueならば Onなわけですから、エラーメッセージを表示して、 return すればOKです。そうすればvalueはつかわなくてもいい。まぁつかってもいいけど、その辺は自由にしてください。

行動規範の内容に同意します

あなたの回答