jQueryでonsubmitとかは必要なし！？

jQueryでコーディングした場合、JavaScriptでコーディングしたonsubmitやonchange等の関数は必要ないという説明があったんですが、どういう意味なんでしょうか
jQueryはJavaScriptを書きやすくしたというだけで、onsubmit等の関数で初めてそういう動作が実行されるもので、それらを省いたら動作が処理されないと思うんですが

上記関数を入れた場合、アラートのERROE1～5が表示されるはずなんですが、下記コードの通り省いたらアラート表示されなくなりました

自分1人では理解ができません

解説お願いします

<?php
  $link = mysqli_connect($host, $user, $pass, $dbname) or die("NG");

	mysqli_select_db($link, "XXX");

	if (isset($_POST['name'], $_POST['comment'], $_POST['bbs']) && $_POST['bbs'] == "post") {
		$name = $_POST['name'];
		$comment = $_POST['comment'];
		mysqli_query($link, "INSERT INTO XXX (name, comment) VALUES ('$name', '$comment')");
	} elseif (isset($_POST['bbs']) && $_POST['bbs'] == "update") {
		$name = $_POST['name'];
		$comment = $_POST['comment'];
		$id = array();
		$id = $_POST['chkid'];
		$id_str = implode(",", $id);
		mysqli_query($link, "UPDATE XXX SET name = '$name', comment = '$comment' WHERE id in($id_str)");
	}  elseif (isset($_POST['bbs']) && $_POST['bbs'] == "delete") {
		$id = array();
		$id = $_POST['chkid'];
		$id_str = implode(",", $id);
		mysqli_query($link, "DELETE FROM XXX WHERE id in($id_str)");
	}

	$result = mysqli_query($link, "SELECT * FROM XXX ORDER BY time DESC");
?>

<html>
	<head>
		<meta charset="utf-8">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script>
			$(function() {
				$('input[name=bbs]').click(function(e) {
					change($(this).prop('id'));
				});
					change($('input[name=bbs]:checked').prop('id'));
			});
			function condition() {
				if ($('#r1').prop('checked')) {
					with($('#name')) {
						if (val().length >= 10) {
							alert("ERROR1");
							return false;
						}
						if (val() === "") {
							alert("ERROR2");
							return false;
						}
					}
					with($('#comment')) {
						if (val().length >= 300) {
							alert("ERROR3");
							return false;
						}
						if (val() === "") {
							alert("ERROR4");
							return false;
						}
					}
				}
				if($('#r2').prop('checked')||$('#r3').prop('checked')) {
					if ($('[name="chkid[]"]:checked').length == 0) {
						window.alert("ERROR5");
						return false;
					}
				}
				return true;
			}
			function change(myid) {
				var sendlist = {
					"r1":{"text":"投稿",checkflg:true},
					"r2":{"text":"更新",checkflg:false},
					"r3":{"text":"削除",checkflg:false},
				};
				$('#send').val(sendlist[myid].text);
				$('[name="chkid[]"]').prop('disabled',sendlist[myid].checkflg);
			}
		</script>
	</head>
	<body>
		<form method="post" action="">//ここに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>

think49

2016/09/12 02:36

質問編集履歴「1 改善 2016/09/12 11:31」で何も編集していないことを確認しました。他の質問者の迷惑になるので不必要に編集するのは止めてください。更新日時を更新して回答者の目を引こうとする行為は逆に自分の首を絞めますよ。

date

2016/09/12 04:13

HTMLのコメントは //ここにonChange="change(this)"をいれてた　２回//ではコメントになりません

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

回答3件

ベストアンサー

jQueryでコーディングした場合、JavaScriptでコーディングしたonsubmitやonchange等の関数は必要ないという説明があった

おそらく意味を曲解しています
htmlに直接onXXXと書かずに、scriptタグ内にコードを落とし込めという意味でしょう

<input type="radio" name="bbs" id="r1" value="post"> にonchangeをかいていたなら

javascript
1$(function(){
2  $('[name=bbs]').change(function(){
3    //ここに書く
4  });
5);

という意味です。

投稿2016/09/12 01:56

yambejp

総合スコア114777

yambejp

2016/09/12 02:02

あと、頑なに他人の忠告を無視しつづけるようですがこの質問に関して「SQLからPHPでデータを抽出する」部分を書くのはやめてください回答者の環境はDBからデータが取り出せるとは限りません。スタティックなHTMLを例示すれば済むことです

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

jQueryを使う以上は、jQuery上の.submit()や.change()を使ってください。

jQueryを使わないにしても、現代のJavaScript環境で、行う仕事をHTMLのon***に書く、ということはあまりお勧めできません。addEventListenerなどで、JavaScriptからセットしましょう。

投稿2016/09/12 01:53

maisumakun

総合スコア145183

JavaScript 書き方

こちらで提示したコードを理解しようとしていれば、この質問は起きないはず…
jQuery じゃない、Pure JavaScript であっても onClick を使わない書き方ができるし、その方が HTML と JavaScript を綺麗に分離できる。

yambejp さんの指摘の意味を理解していないようなので補足します。
提示されたコードでは、DBに入っている値が確認できないと、正しいHTMLが出力されているかどうかはわからず、推測で回答せざるをえない。

どうしてもPHPソースを含めたソースコードしか提示出来ないのであれば、DB及びテーブルの構造を提示し、実際に取り出した値を提示しない限り、回答者はあなたの目の前にある現象を再現できない。

今回の質問の場合、JavaScriptの問題なのでそれよりも出力されたHTMLを提示さえすれば解決につながるわけだから、PHPを実行した結果、出力されたHTMLさえあれば、回答は可能なのです。

ブラウザの画面に見える部分はあくまでも、ブラウザが多少のエラーを「よしなに」修正して表示するので、これを示したところで、根本解決にはつながりません。以下のように、ブラウザ上で「右クリック」すれば、「コンテキストメニュー」に「ページのソースを表示」と出てくる。

これをクリックすれば、以下のように、HTMLソースが表示される。

JavaScript の問題なのだから、これを提示すれば、質問としての質は上がるわけです。
画面から見えなくてもここにPHPのエラーが出ていて、JavaScriptの動作を阻害しているかもしれないそんな可能性もあるし、ここから読み取ることができる問題は、あなたが気付いていないものも含めて、回答の手助けになるはずです。

投稿2016/09/12 02:15

編集2016/09/12 03:53