フォームの入力内容をリセットするとき、「リセットしてよろしいですか？」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約２秒間程だけ表示する。確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。
実装例
実装例の動作について
リセットボタンを押すと、「リセットしてよろしいですか？」という確認ダイアログが出現。
- 確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約２秒間程だけ表示する。
- 確認ダイアログ内で、「キャンセル」を選択した場合、リセットを中止する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function confirmReset(){
var flag = confirm('リセットしてよろしいですか？');
if ( flag ) {
document . getElementById( 'reset-result' ) . style . display = "inline";
setTimeout ( "nonDisplayTimer()", 2000 );
return true;
} else {
return false;
}
}
function nonDisplayTimer() {
document . getElementById( 'reset-result' ) . style . display = "none";
}
// -->
</script>
<!--
function confirmReset(){
var flag = confirm('リセットしてよろしいですか？');
if ( flag ) {
document . getElementById( 'reset-result' ) . style . display = "inline";
setTimeout ( "nonDisplayTimer()", 2000 );
return true;
} else {
return false;
}
}
function nonDisplayTimer() {
document . getElementById( 'reset-result' ) . style . display = "none";
}
// -->
</script>
HTML
<form method="post" onreset="return confirmReset()">
<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="リセット"> <span id="reset-result" style="display:none;">リセットしました。</span></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="リセット"> <span id="reset-result" style="display:none;">リセットしました。</span></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function confirmReset(){
var flag = confirm('リセットしてよろしいですか？'); // 確認ダイアログを表示し、戻り値を変数 flag に代入
if ( flag ) { // 確認ダイアログで「OK」を選択し、変数 flag に true が代入されている場合
document . getElementById( 'reset-result' ) . style . display = "inline"; // 「リセットしました。」を表示
setTimeout ( "nonDisplayTimer()", 2000 ); // 2000ミリ秒後に、nonDisplayTimer() を実行
return true; // リセット実行
} else { // 確認ダイアログで「キャンセル」を選択し、変数 flag に false が代入されている場合
return false; // リセット中止
}
}
function nonDisplayTimer() {
document . getElementById( 'reset-result' ) . style . display = "none"; // 「リセットしました。」を非表示
}
// -->
</script>
<!--
function confirmReset(){
var flag = confirm('リセットしてよろしいですか？'); // 確認ダイアログを表示し、戻り値を変数 flag に代入
if ( flag ) { // 確認ダイアログで「OK」を選択し、変数 flag に true が代入されている場合
document . getElementById( 'reset-result' ) . style . display = "inline"; // 「リセットしました。」を表示
setTimeout ( "nonDisplayTimer()", 2000 ); // 2000ミリ秒後に、nonDisplayTimer() を実行
return true; // リセット実行
} else { // 確認ダイアログで「キャンセル」を選択し、変数 flag に false が代入されている場合
return false; // リセット中止
}
}
function nonDisplayTimer() {
document . getElementById( 'reset-result' ) . style . display = "none"; // 「リセットしました。」を非表示
}
// -->
</script>
HTML
onreset=""
<form method="post" onreset="return confirmReset()">
form要素のイベント属性である onreset="" で、リセット時に、JavaScript の confirmReset() を呼び出し、return で、戻り値を取得。戻り値が true の場合、リセットを実行する。戻り値が false の場合、リセットを中止する。
リセットしました。
<span id="reset-result" style="display:none;">リセットしました。</span>
リセットを実行した場合、この部分を、JavaScript で、コントロールし、約２秒間程だけ表示する。