JavaScriptでおかしいところ

JavaScriptで、
・「投稿」ボタン押下時、括弧の条件を満たす場合はエラー(javascript:alert)を表示し、投稿を中止する。（0文字と10文字以上）
・「投稿」ボタン押下時、括弧の条件を満たす場合はエラー(javascript:alert)を表示し、投稿を中止する。（0文字と300文字以上）
・ラジオボタン「投稿」がチェックされている状態の場合は「投稿」ボタンを表示する。
・ラジオボタン「更新」がチェックされている状態の場合は「更新」ボタンを表示する。
・ラジオボタン「削除」がチェックされている状態の場合は「削除」ボタンを表示する。
・ラジオボタン「投稿」がチェックされている状態の場合はチェックボックス非表示。
・チェックボックスはラジオボタンの「更新」「削除」がチェックされた場合のみ表示する。
・チェックボックスが未チェックのままボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止する。
という条件を追加したくて、下記コードの通りに書いてみたんですが、ブラウザ表示した時点で勝手に投稿されるという謎の動作を確認しました

何がどうなっているのか調べても解明できません

またフォームに括弧条件下でsubmitボタンを押しても「ERROR」が表示されず、どのように訂正すればいいのか教えていただけませんか

PHP
1	$link = mysqli_connect($host, $user, $pass, $dbname) or die("NG");
2
3	mysqli_select_db($link, "XXX");
4
5	if (isset($_POST['name'], $_POST['comment'], $_POST['bbs']) && $_POST['bbs'] == "post") {
6		$name = $_POST['name'];
7		$comment = $_POST['comment'];
8		mysqli_query($link, "INSERT INTO XXX (name, comment) VALUES ('$name', '$comment')");
9	} elseif (isset($_POST['bbs']) && $_POST['bbs'] == "update") {
10		$name = $_POST['name'];
11		$comment = $_POST['comment'];
12		$id = array();
13		$id = $_POST['chkid'];
14		$id_str = implode(",", $id);
15		mysqli_query($link, "UPDATE XXX SET name = '$name', comment = '$comment' WHERE id in($id_str)");
16	}  elseif (isset($_POST['bbs']) && $_POST['bbs'] == "delete") {
17		$id = array();
18		$id = $_POST['chkid'];
19		$id_str = implode(",", $id);
20		mysqli_query($link, "DELETE FROM XXX WHERE id in($id_str)");
21	}
22
23	$result = mysqli_query($link, "SELECT * FROM XXX ORDER BY time DESC");
24?>

HTML
1<html>
2	<head>
3		<meta charset="utf-8">
4		<script>
5			function chk() {
6				var de = document.getElementById("r3").checked;
7				var up = document.getElementById("r2").checked;
8				if (de == false) {
9					if (document.form.name.value.length > 10) {
10						window.alert("ERROR");
11						return false;
12					} elseif (document.form.name.value.length == 0) {
13						window.alert("ERROR");
14						return false;
15					} elseif (document.form.comment.value.length > 300) {
16						window.alert("ERROR");
17						return false;
18					} elseif (document.form.comment.value.length == 0) {
19						window.alert("ERROR");
20						return false;
21					} elseif (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				} elseif (radiob[1].checked == true) {
33					document.getElementById("send").value = "更新";
34				} elseif (radiob[2].checked == true) {
35					document.getElementById("send").value = "削除";
36				}
37			}
38			window.onload = function() {
39				document.getElementById('r-1').onClick = function() {
40					for(var word = 1; word <= 10; word++) {
41						document.getElementById('chkb' + word).disabled = true;
42					}
43				}
44				document.getElementById('r-2').onClick = function() {
45					for(var word = 1; word <= 10; word++) {
46						document.getElementById('chkb' + word).disabled = false;
47					}
48				}
49				document.getElementById('r-3').onClick = function() {
50					for(var word = 1; word <= 10; word++) {
51						document.getElementById('chkb' + word).disabled = false;
52					}
53				}
54			}
55			function nochk() {
56				var up = document.getElementById("r2").checked
57				var de = document.getElementById("r3").checked
58				var num = 0;
59				var chkvalue = "";
60				for(var word = 1; word < 10; word++) {
61					obj = document.getElementById("chkb" + word);
62					if (obj.checked == true) {
63						chkvalue += obj.value;
64						num++;
65						if (up == true) {
66							document.getElementById("send").name = "upd";
67						} elseif (de == true) {
68							document.getElementById("send").name = "del";
69						}
70					}
71				}
72				if (num == 0) {
73					window.alert("ERROR");
74				}
75			}
76		</script>
77	</head>
78	<body>
79		<form method="post" action="" name="form" onsubmit="return chk()">
80			<table>
81				<tr>
82					<td>
83						名前：<input type="text" name="name">
84						内容：<textarea name="comment" cols="30" rows="3"></textarea>
85						<input type="radio" name="bbs" id="r1" value="post" onchange="change()">投稿
86						<input type="radio" name="bbs" id="r2" value="update" onchange="change()">更新
87						<input type="radio" name="bbs" id="r3" value="delete" onchange="change()">削除
88						<input type="submit" value="投稿" id="send">
89					</td>
90				</tr>
91			</table>
92
93<?php
94			while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
95?>
96
97			<table>
98				<input type="checkbox" name="chkid[]" id="chkb" value="<?=$row['id'] ?>">
99				<tr>
100					<td>名前：
101						<?php echo $row['name'] ?>
102					</td>
103				</tr>
104				<tr>
105					<td>内容：
106						<?php echo $row['comment'] ?>
107					</td>
108				</tr>
109			</table>
110
111<?php
112			}
113			mysqli_free_result($result);
114
115			mysqli_close($link);
116?>
117
118		</form>
119	</body>
120</html>

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

回答2件

formタグに「form」というnameをつけたり
特定の要素に「name」というnameをつけてform.nameで参照したりやめてください。
またdocument.form的なnameを利用したアクセスの仕方もあまり推奨できません
それとjavascriptの「elseif」は「else if」です

ブラウザのF12機能で文法的にエラーがなくなるまでよくよく
検証してみてください

投稿2016/08/23 06:07

yambejp

総合スコア114812

ベストアンサー

ブラウザ表示した時点で勝手に投稿される

それはJavaScriptではなくPHP側の問題では？

document.getElementById('r-1') など無い要素を取得しようとしていたり、エラーがたくさん出るので、それをすべて確認／修正し、それから質問してください。また、HTML/JavaScript、PHP、DB操作はそれぞれ1つずつ解決されたほうが良いです。最初はDBへの登録はせず、HTML/JavaScriptからのPOSTを適切に受け取れるようにし、それからDBに着手されたほうが良いと思います。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2016/08/23 06:50