フォームの入力内容をリセットするとき、「リセットしてよろしいですか？」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。
実装例
実装例の動作について
リセットボタンを押すと、「リセットしてよろしいですか？」という確認ダイアログが出現。
- 確認ダイアログ内で、「OK」を選択した場合、リセットを実行。
- 確認ダイアログ内で、「キャンセル」を選択した場合、リセットを中止。
ソースコード
HTML
<form method="post" onreset="return confirm('リセットしてよろしいですか？')">
<p>名前</p>
<p><input type="text" name="InputText1"></p>
<p>コメント</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="reset" value="リセット"></p>
</form>
<p>名前</p>
<p><input type="text" name="InputText1"></p>
<p>コメント</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="reset" value="リセット"></p>
</form>
解説
HTML
confirm(‘リセットしてよろしいですか？’)
<form method="post" onreset="return confirm('リセットしてよろしいですか？')">
form要素のイベント属性である onreset="" で、リセット時に、JavaScript の confirm(‘リセットしてよろしいですか？’) を呼び出し、確認ダイアログを表示し、return で、戻り値を取得。確認ダイアログ内で、「OK」を選択し、戻り値が true の場合、リセットを実行する。確認ダイアログ内で、「キャンセル」を選択し、戻り値が false の場合、リセットを中止する。
リセットボタン
<input type="reset" value="リセット">