Input Text 等が複数ある時に入力中、思わずEnterキーを押してしまい、
未入力部分があるにもかかわらず「送信」をしてしまったことは無いだろうか。
このスクリプトはそういうFormで「Enterキー」で送信されることを無効化します。

【　Form 1 と Form 2の違いは？　】

まず、Form1ではEnterキーによる無条件に送信されるのを防ぐために、

<form name="form1" action="nextPage.cgi" method="get" onsubmit="return false;">

として、onsubmit="return false;"とすることで送信を無効にしています。
入力内容チェックなどが必要な場合は関数呼び出しでもかまいません。
さらに、送信ボタンの部分。

<input type="button" name="send" value="送信" onclick="submit();">

ここでは、通常"submit"とする部分を"button"として、クリックイベントの
onclick="submit();" で初めて送信(submit)を行わせています。
また、[TAB]キーでフォーカスを移動して行ったとき[送信]ボタンに
フォーカスが来た場合は、[Enterキー]での送信が有効になります。

※注意
通常のForm送信でパラメータに付加される&key=...というような情報
（この場合&send1=送信)は、Enterを無効化した場合には、付加されません。
すなわち、送信後どのボタンを押されたかの判断をボタンのnameで受ける処理がある場合、旨く動作しなくなります。
そういう処理をするときには、<INPUT TYPE="hidden" NAME="send1" VALUE="送信">の様に
隠しフィールドを追記する必要があります。
そして、複数の送信ボタンがある場合は、hiddenに値を設定する関数を呼び出す等の処理も必要になります。
＜例＞
function setValue(val){
   document.form1.send1.value = val;
   document.form1.submit();
}

HTMLでは
<input type="hidden" name="send1">
及び
<input type="button" value="送信" onclick="setValue('送信');">
<input type="button" value="更新" onclick="setValue('更新');">

Homeへ戻る

Author Hiyoko (c)2002/04/17