2014年9月20日土曜日

text入力欄でEnterキーを押してもフォームを送信しないJavascript

ホームページのフォームでtext入力欄を3つ作って、公開したとする。利用者が、最初のtext欄に入力して、Enterキー(リターンキー)を押したとすると、他の2ケ所を入れる前に、意図せずフォームが送信されてしまう。

text入力欄でEnterキーを押してもフォームを送信しない方法と、そのときに同時にエラーメッセージを表示する方法のjavascriptを書いておきますので利用してください。

下記のjavascriptを<head></head>の間にコピーする。function formcheck()がエラーメッセージの表示。function submitStop(e)がEnterキーを押したときの動作を制御して、フォームを送信させないようにする部分。
<table></table>は<body>のformに記述する。


<script type="text/javascript">
<!--
function formcheck(){
var flag = 0;
if(document.formwebtest.secid.value == ""){
flag = 1;
}else if(document.formwebtest.secmail.value == ""){
flag = 1;
}else if(document.formwebtest.secname.value == ""){
flag = 1;
}

if(flag){
window.alert("必須項目が未入力");
return false;
}else{
return true;
}
}


function submitStop(e){
if (!e) var e = window.event;
if(e.keyCode == 13)
return false;
}
// -->
</script>


<table>
<tr>
<td>テキスト1:</td>
<td><input name="secid" value="" type=text size=68 onKeyPress="return submitStop(event);"></td>
</tr>

<tr>
<td>テキスト2:</td>
<td><input name="secmail" value="" type=text size=68 onKeyPress="return submitStop(event);"></td>
</tr>

<tr>
<td>テキスト3:</td>
<td><input name="secname" value="" type=text size=68 onKeyPress="return submitStop(event);"></td>
</tr>
</table>

0 件のコメント:

コメントを投稿