エンターでフォームを送信されないようにする方法

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>

“エンターでフォームを送信されないようにする方法” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください