フォームの送信前に確認ダイアログをはさむ方法

例えばこういうフォームがあったとして、送信前に確認メッセージをはさみたいときのシンプルな実装方法の例をご紹介。

<form id="example-form" action="example.php" method="post">
    <input type="text" name="key" value="">
    <input type="submit" value="送信">
</form>

みんな大好きjQuery使います。今更感満載ですが、ご参考にどうぞ。

// 送信ボタンクリックが送信タイミングとは限らない（Enterかもしれないし）ので、フォームのsubmitイベントを拾うようにする
$('#example-form').on('submit', function(e, context) {
    // 実行指示のパラメータがあれば何もしない
    if (context === 'execute') {
        return;
    }

    // 確認表示の為に送信を抑止する
    e.preventDefault();

    if (confirm('送信していいですか？')) {
        // 実行指示の合言葉を引数にしてイベントを自前発火する
        $(this).trigger('submit', ['execute']);
    }

    // confirmの戻り値がfalseなら何も起きない
});

ちなみに、$(this).serializeArray()とかでフォームデータの取得も容易にできるので、確認メッセージにフォームデータを含んだり、簡単なバリデーションなんかもここに入れられるでしょう。
以上。