問合せフォームの未入力チェック/誤送信防止のjavascript
2011-7-10Tags: このエントリをはてなブックマークに追加

会社のお問い合わせフォームで、入力途中の誤送信が多く、入力する人にとっても不便だなと感じていたので、未入力項目がある場合は送信できないようにjavascriptを追加しました。
プログラミングは素人なので自分用にメモです。

*****

まずフォームのhtmlをいじります。

<form method=”POST” action=”*ここは各自*.cgi” name=”form1” onSubmit=”return check()”>

名前:<input type=”text” name=”handle-name” size=”40″>

メールアドレス:<input type=”text” name=”email” size=”40″>

内容:<textarea name=”description” rows=”5″ cols=”40″></textarea>

<input type=”submit” value=”送信”>

<form>タグのnameは「form1」でなくても何でもいいのですが、
javascript内の「form1」と連動するので同じにしておきます。

<form>タグ内に onSubmit=”return check() を追加し、
送信ボタンを押したときにjavascriptでチェックするようにします。

そして以下のjavascriptを、フォームを設置しているページの<head>~</head>間に入れます。

<script type=”text/javascript”>

<!– function check()

{ var flag = 0;

if(document.form1.handle-name.value == “”){ flag = 1; }

else if(document.form1.email.value == “”){ flag = 1; }

else if(document.form1.description.value == “”){ flag = 1; }

if(flag){ window.alert(‘未入力の項目があります’); return false; }

else{ return true; }}// –>

</script>

色付の箇所は変更可能です。
フォームとjavascriptは連動するので、同じ色の箇所は同じものにしておきます。

else ifの行を追加すればチェック項目を増やせます。

Write a comment