送信する前に確認ダイアログを表示する方法
次に、[Enter]キーの押下で送信する仕様自体は有効のままで、送信前に確認ダイアログを表示することで、誤送信を防ぐ方法をご紹介いたします。■form要素のsubmitイベントで確認ダイアログを表示させる
送信前に確認するには、フォームのsubmitイベントで確認ダイアログが表示されるようにすれば良いでしょう。方法は簡単で、下記のようにform要素の開始タグでJavaScriptのconfirmメソッドを使うだけです。
<form onsubmit="return confirm('送信しますか？');" action="***" method="***">
※「***」の部分は既存の記述に合わせて下さい。form要素にonsubmit属性を加え、その値に「return confirm('送信しますか？');」と記述しています。最初の「return」を忘れないよう記述して下さい。また、引用符の内側に記述した「送信しますか？」の文字列は自由に書き換えられます。
上記のようにすると、たとえ[Enter]キーが押されてsubmitイベントが実行されても、実際に送信される前に「送信しますか？」と確認ダイアログが表示されるため、そこでさらに「OK」ボタンを押さない限りは送信されません。したがって、誤送信は防げるでしょう。
※confirmメソッドは、引数に指定した文字列と[OK]・[キャンセル]の2つのボタンを表示します。[OK]が押された場合はtrueが返り、[キャンセル]が押された場合はfalseが返ります。そのため、[キャンセル]が押された場合はフォームのsubmitイベントもfalseになり、送信はされなくなります。
■ソースと表示例
入力欄も含めてソースを記述すると、例えば以下のようになります。
<form onsubmit="return confirm('送信しますか？');" action="***" method="***">
入力欄1：<input type="text" name="st1" value="" size="25"><br>
入力欄2：<input type="text" name="st2" value="" size="25"><br>
入力欄3：<input type="text" name="st3" value="" size="25"><br>
<input type="submit" value="送信する">
</form>
このソースを表示すると、以下のようになります。
下記のように入力欄が1つだけで送信ボタンがない場合でも、[Enter]キーを押せば確認ダイアログが表示されます。
