Webフォームの入力途中で、誤ってエンターキーを押してしまうと、フォームが送信されてしまう。
未入力が全てエラーとして表示されたりして、不便だ。
また、なにか入力してボタンにより処理を選択する場合、どちらを選択されてしまうのか、よく解らない。
解決するには、ボタンをクリックした場合以外はフォームを送信しないようにする。
これは、JavaScriptを使って、以下のようにして実現できる。
1. フォームに必ず名前をつける
form タグで必ず name オプションを指定しておく。
2. ダミーの input type=”text” タグを2つ用意する
input type=”text” (type=”password”) タグが2つ以上ないと、エンターでフォームが送信されてしまう。
※ これがミソ
3. イベント名を格納する input type=”hidden” タグを用意する
onclick イベントで設定する。
4. input type=”submit” (type=”image”) タグは使わない
input type=”button” タグなどに変更する。
5. onclick イベントでフォームを送信する
input type=”submit” の拡張となる。
6. イベント送信用に関数を準備する
全体は以下のようになる。
<html>
<head>
...
<script type="text/javascript">
<!--
function _on_event(_event)
{
document.form_event._event.value = _value;
document.form_event.submit();
}
-->
</script>
</head>
<body>
<form name="form_event" method="POST">
<input type="hidden" name="_event" />
<input type="text" name="_dummy_1" style="display: none;" />
<input type="text" name="_dummy_2" style="display: none;" />
...
<input type="button" value="実行" onclick="_on_event('execute');" />
<input type="button" value="取消" onclick="_on_event('cancel');" />
...
</form>
</body>
</html>
とても参考になりました。
ありがとうございました??