第42回 「リセットボタン」
今回はリセットボタンと、リセットボタンが押されたら確認のダイアログを表示しフォーム内容を消去するかどうかを決めるプログラムについて説明します。
リセットボタンはinputタグで以下のように書きます。
<input type="reset" value="消去">
リセットボタンは前回説明したボタンと違い、submitボタンに近いものになります。普通のボタンのようにonClickイベントを使うこともできます。この場合は以下のようになります。
<input type="reset" value="リセットする" onClick="check()">
ただし、この場合リセットボタンが押されたら確認のダイアログを表示しフォーム内容を消去するかどうか処理する場合、自前で処理してもフォーム内容が消去されてしまいます。これでは、ただ警告のメッセージが表示されるだけで確認をとって消すかどうか処理することができません。
以前処理したsubmitボタンと同様にリセットボタンが押されるとonResetイベントが発生します。onSubmitイベントと同様に<form>タグ内に以下のように記述します。
<form onReset="check()">
これでリセットボタンが押されると関数checkが呼び出されます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
flag = confirm("リセットしますか？");
}
// --></script>
</head>
<body>
<form onReset="check()">
<input type="text" value="123">
<input type="reset" value="リセットする">
</form>
</body>
</html>
まだ説明していない命令がありました。confirmは単純にメッセージを表示するのではなく、利用者に確認のダイアログを表示し、OKかキャンセルかを尋ねます。OKが押されたらconfirmはtrueを返し、キャンセルだったらfalseを返します。JavaScriptにはalert()のように何も値を返さないものと、confirm()のように何かの値（戻り値）を返すものがあります。上記プログラムでは戻り値の結果は変数flagに入るようになっています。
上記プログラムを実行してみると確認のダイアログは表示されますがOKでもキャンセルでも、フォーム内容がリセットされてしまいます。これはsubmit同様に関数からの戻り値によってフォーム内容を消すかどうかが決まっています。戻り値がtrueであれば消去する、falseであれば消去しません。
<form>タグには以下のように記述します。
<form onReset="return check()">
これはonSubmitと同じ書き方です。あとは関数checkからの戻り値がtrueかfalseかを決めればよいのですが、幸いにしてconfirmの戻り値が、そのまま利用できます。これは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
flag = confirm("リセットしますか？");
return flag;
}
// --></script>
</head>
<body>
<form onReset="return check()">
<input type="text" value="123">
<input type="reset" value="リセットする">
</form>
</body>
</html>
このプログラムはもっと簡単にでき以下のようにも記述することができます。
<html>
<head>
<title></title>
</head>
<body>
<form onReset="return confirm('リセットしますか？')">
<input type="text" value="123">
<input type="reset" value="リセットする">
</form>
</body>
</html>
次回はテキストフィールドへの入力許可・禁止の制御を行ってみます。