第32回　「送信時に空欄チェックを行う（１）」

前回は空欄チェックのプログラムを作成しました。前回までのプログラムは入力後にチェックするものでした。今回は送信ボタンが押された時に空欄があるかどうかチェックして空欄がなければ送信、空欄だったら送信しないようにします。
　まず、送信ボタンが必要ですがこれはHTMLで以下のように指定します。
　
<input type="submit" value="送信">

　送信ボタンが押されたら処理するのでonClickイベントの記述が必要かと思われますが、送信する際のイベントはformタグ内にonSubmitイベントを書きます。これは以下のようになります。
　
<form onSubmit="check()" action="./test.cgi">

　これで送信ボタンが押されたら関数checkが呼び出されます。action属性部分はcgiのパスなどを書きます。JavaScriptの動作テストだけならばmailto:xxx@xxx.comのようにメールアドレスを指定するという方法もあります。（送信時の設定によっては何も起こらなかったり期待通り動かない事もあります）
　関数check側ではテキストフィールドが空欄かどうかを調べます。テキストフィールドが複数ある場合にはforと組み合わせると便利です。例えばテキストフィールドが３つある場合には以下のようにしてします。
　
for (i=0; i<3; i++)
{
txt = document.forms[0].elements[i].value;
if (txt == "") alert("未入力です");
}

　elementsの指定が数値でなくforで指定した変数になっているのが分かるでしょうか。このようにすると変数iの値によってテキストフィールドの内容を読み出すことができます。
　以上の事をまとめたのが以下のプログラムになります。
　
<html>
<head>
<title></title>
<script language="JavaScript"></script>
</head>
<body>
<form onSubmit="check()" action="mailto:javascript@po.shiojiri.ne.jp">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="送信">
</form>
</body>
</html>

　ただし、この方法だと汎用性に欠ける上にテストしてみると空欄であってもデータが送信されてしまいます。空欄がある場合には送信しないようにする必要があります。その場合にはonSubmitで呼び出された側に「値を返す」必要があります。
　
　次回は送信時に空欄があったら送信しないようにする方法について説明します。

第32回 「送信時に空欄チェックを行う（１）」

第32回　「送信時に空欄チェックを行う（１）」