フォームの送信前にJavascriptで確認

どういう状況

データを削除できるボタン。
削除ボタンを押してすぐにデータが削除されると困るので、送信時によろしいですか？みたいな確認の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文が実行される。