フォームの送信時に確認ダイアログを表示する方法

フォームの送信時に、ユーザーに確認を求めるダイアログを表示する方法を解説します。

確認ダイアログの表示

確認ダイアログはWindow.confirm()メソッドで表示します。このメソッドはユーザーにより[OK]ボタンがクリックされるとtrueを、[キャンセル]ではfalseを返します。

確認ダイアログ

送信のキャンセル

一方でユーザーによりフォームの[送信]ボタンがクリックされたときには、Formオブジェクトのonsubmitイベントハンドラでそれを検出できます。このonsubmitハンドラがfalseを返すと送信はキャンセルされるため、先のconfirm()メソッドの返値をそのまま返すようにします。

サンプルコード

<form onsubmit="return confirm( '送信を実行しますか？' );" method="get" action="" >
  <input type="text" />
  <input type="submit" />
</form>

サンプル

※ このサンプルでは実際には何も送信しません。[OK]をクリックするとページが再読込され、[キャンセル]では処理が中断され何も起こりません。