PHPのサーバー側の勉強をしていて、まさかのJavaScriptで躓くとは思っていませんでした。
しかもネット上でonSubmitに関する問題に直面した人は多数いたのですが、私のような現象になった人はいなかったようです。。。
今回二つの問題がやっと解決できた（？）ので、共有したいと思います。
#onSubmitじゃなくてonClickつかえばいいじゃん
と思いますよね。私も最初はそう思ってやっていましたが、onClickを使ってしまうとreturnの結果がtrueでもfalseでも結局のところ画面遷移をしてしまう。。。
最初の問題のソースコードです（PHPを記述していますがあまり気にしないでください、JavaScriptの部分だけ見ていただければ大丈夫です）。
<?php
require_once("exer1205.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>確認画面</title>
<script type="text/javascript">
function check(){
if(window.confirm("本当に送信していいですか？")){
return true;
} else {
window.alert("戻るボタンを押して入力しなおしてください。");
return false;
}
}
</script>
</head>
<body>
<center>
<h2>入力の内容に間違いはないですか？</h2>
<?php
$user = new User();
$user->setId($_POST["id"]);
echo "ID：".$user->getId()."<br>";
$pass = $user->setPassword($_POST["pass"]);
echo "パスワード：".$user->getPassword($pass)."<br>";
$name = $user->setName($_POST["name"]);
echo "名前：".$user->getName($name)."<br>";
$tel = $user->setTel($_POST["tel"]);
echo "電話番号：".$user->getTel($tel)."<br>";
$mail = $user->setEmail($_POST["mail"]);
echo "E-mail：".$user->getEmail($mail)."<br>";
?>
<form method="post" action="exer1206-2.php" onsubmit="return check()">
<input type="button" value="戻る" onclick="history.back()" />
<input type="submit" value="送信する">
</form>
</center>
</body>
</html>
これが全体のソースコードです。
JavaScriptの部分ですが、ここのサイト(http://www.tagindex.com/javascript/form/submit.html)
を丸パクリしました。もちろん私のコード仕様に合わせています。
<script type="text/javascript">
function check(){
if(window.confirm("本当に送信していいですか？")){
return true;
} else {
window.alert("戻るボタンを押して入力しなおしてください。");
return false;
}
}
</script>
<form method="post" action="exer1206-2.php" onsubmit="return check()">
<input type="button" value="戻る" onclick="history.back()" />
<input type="submit" value="送信する">
</form>
サイト見ていただければ分かりますが、上二つはほとんど同じです。
最初はonClickを使ってたので
<form method="post" action="exer1206-2.php">
<input type="button" value="戻る" onclick="history.back()" />
<input type="submit" value="送信する" onclick="check()">
</form>
とこんな感じになってました。そして何度実行しても、思った結果にならなかったです。
##onClickを使った実行結果
文字は適当に入力しています。最初の画面です。
「送信する」を押した時の画面。「OK」を押せば次の画面に遷移します。
問題は「キャンセル」を押したとき…
「キャンセル」を押したときの画面。ここで「OK」を押せば、何も起きずダイアログだけが消えるはずでした。
ですが、onClickを使っているので、結果がtrueであろうが、falseであろうが遷移してしまう。なので、検索した結果onSubmitにたどり着いたのです、が、ここでもまた問題が発生しました。。。
##onSubmitを使った実行結果
このときの実行画面はないです。なぜかというと、「送信する」を押すと、そもそもダイアログすら出ずに次のページに飛んでしまうからです。
まじで意味がわからん。変なところで躓いたイライラが募るばかりでした。
#ちょっと書き方を変えてみる
さっきのやつ。
<script type="text/javascript">
function check(){
if(window.confirm("本当に送信していいですか？")){
return true;
} else {
window.alert("戻るボタンを押して入力しなおしてください。");
return false;
}
}
</script>
このときの推測ですが、onSubmitにtureかfalseが返っていないんだろうと思い、ちょっと変えてみました。
それが次のソースです。
<script type="text/javascript">
var check = function(){
if(window.confirm("本当に送信していいですか？")){
return true;
} else {
window.alert("戻るボタンを押して入力しなおしてください。");
return false;
}
}
</script>
単純に関数を変数に入れてしまって、変数にtrueかfalseを変えすようにしました。
意味合い的にはほとんど変わらないと思います。
##結果
実行画面はないですが、結果的には実行できて、ダイアログも出る、「キャンセル」→「OK」で画面遷移しない、最初のダイアログで「OK」を押すと次の画面に遷移する。
完璧な挙動です！ ですが、結局なぜ動かなかったのかわからない・・・。
#またさっきのコードに戻してみた
<script type="text/javascript">
function check(){
if(window.confirm("本当に送信していいですか？")){
return true;
} else {
window.alert("戻るボタンを押して入力しなおしてください。");
return false;
}
}
</script>
これです。
実行してみると、なんと！！！！ 正しい挙動をしたんですよ！！！！
ダイアログも出る、「キャンセル」→「OK」で画面遷移しない、最初のダイアログで「OK」を押すと次の画面に遷移する。
上のやつと同じです。なんでだろう。
#解決策として。。。
プログラム友人に聞いてみたところ、たぶんキャッシュがたまってたんじゃないかと言われました。確かに、プログラムがうまくいかず、何度も違うコード試していたのでたまっていたと思います。
それで、違う書き方（関数を変数に代入してやるやつ）をしてみたところできるようになった、と。
直接的なエラーではなく、全くわからないものだったので今回は本当に困りました。
長くなったのでonSubmit問題その２は次に書こうと思います。これは私の単純なミスだったんですが…。