どういう状況
データを削除できるボタン。
削除ボタンを押してすぐにデータが削除されると困るので、送信時によろしいですか？みたいな確認のalertを出したい。さらにはい・いいえで送信したり送信をやめたりする動きにしたい。
ざっくりと削除ボタンがあります
<form action="削除処理.php" method="post">
<input type="submit" value="削除">
</form>
送信してしまうと削除処理が動いてしまうので、
送信時に確認する、というより送信前に確認、ＯＫなら送信、キャンセルなら送信をやめる。
という動きにする。
送信前に走るjavascriptはonSubumitでコントロールできる。
formにonSubmit属性を追加
onSubmit=処理
フォームに上記を追加。
onSubmit属性とは
フォームの送信時に実行するscriptを設定できる。
返り値がtrueかfalseかによってform の送信をキャンセルできる。
onSubmit="return false"直接このように書くとsubmitできない状態。
onSubmit時に呼び出される処理を書く。
<script>
function CheckDelete(){
if(confirm('削除しますか？')){
return true;
}else{
alert('キャンセルされました');
return false;
}
}
</script>
onSubmitイベントについて
submitはbuttonやを押すと発生form要素で発生する。
alertだとOKボタンしかでないので、confirmを使ってOK/キャンセルボタンが出るようにする。
confirmの返り値はOKでtrue、キャンセルでfalseが返るのでその値によって処理を分ける。
このようになっているかと思います。
<form action="削除処理.php" method="post" onSubmit="CheckDelete()">
<input type="submit" value="削除">
</form>
<script>
function CheckDelete(){
if(confirm('削除しますか？')){
return true;
}else{
alert('キャンセルされました');
return false;
}
}
</script>
しかしこれでは問題があります。
キャンセルを選択しても削除されてしまう？
このソースを実行すると、「削除しますか？」＞キャンセルを選択しても削除される、つまりsubmitされてしまいます。
処理の内容的には大丈夫そうなのに。。。と悩み調べてみると、
onSubmit時に呼び出す処理を指定する際、returnが必要とのこと。
ポイントはreturn
onSubmit = 処理だけでは「onSubmit時に処理を実行する」しかやってない。
つまり、実行した結果は受け取っていないのです。ので、
onSubmit = return 処理にする必要がある。
<form action="削除処理.php" method="post" onSubmit="return CheckDelete()">
ちなみに、
if文の条件の中にあるconfirm()はいつの間に実行されているの！？
<script>
function CheckDelete(){
if(confirm('削除しますか？')){
return true;
}else{
alert('キャンセルされました');
return false;
}
}
</script>
if文は（）の条件がtrueだったときに処理が走るのに、変だなと思った。が、
（）の中から実行される
ので、confirm（）の処理が走ってＯＫもしくはキャンセルを選択するとif文が実行される。