会社のお問い合わせフォームで、入力途中の誤送信が多く、入力する人にとっても不便だなと感じていたので、未入力項目がある場合は送信できないようにjavascriptを追加しました。
プログラミングは素人なので自分用にメモです。
*****
まずフォームのhtmlをいじります。
名前:<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>間に入れます。
<!– 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の行を追加すればチェック項目を増やせます。

