第34回 「複雑な場合の空欄チェック（１）」
前回は空欄チェックで空欄がある場合は送信しない、埋まっていたら送信するという処理について勉強しました。（以下は前回のプログラム）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
for (i=0; i<3; i++)
{
txt = document.forms[0].elements[i].value;
if (txt == "")
{
alert("未入力です");
return false;
}
}
return true;
}
// --></script>
</head>
<body>
<form onSubmit="return 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>
前回のプログラムは空欄かどうか調べるテキストフィールドが順序よく並んでいるためfor命令と組み合わせて手軽に処理することができました。しかし、実際はラジオボタンやチェックボックスなどが混在するため前回のプログラムのように都合良くいきません。
例えば以下のようにチェックボックスと混在している場合を考えてみましょう。
<form onSubmit="return check()" action="mailto:javascript@po.shiojiri.ne.jp">
<input type="checkbox"><input type="text"><br>
<input type="text"><br>
<input type="checkbox"><input type="text"><br>
<input type="checkbox"><input type="text"><br>
<input type="text"><br>
<input type="submit" value="送信">
</form>
このようになっているとfor命令とelementsの組み合わせで手軽にはできないのが分かるかと思います。要するに面倒くさい状態です。
参照番号を使って処理しようとすると内容を読み出すだけで以下のように何行も書かなければいけなくなってしまいます。
txt = document.forms[0].elements[1].value;
空欄チェック処理
txt = document.forms[0].elements[2].value;
空欄チェック処理
txt = document.forms[0].elements[4].value;
空欄チェック処理
txt = document.forms[0].elements[6].value;
空欄チェック処理
txt = document.forms[0].elements[7].value;
これは名前を付けても似たような状態になります。ただし、名前を規則正しく付ける事によって手軽に処理させることが可能です。cgi側との兼ね合いもありますが、処理を楽にするのであれば「名前＋番号」という組み合わせにするのがベストです。例えば以下のようにDBと数字の組み合わせのようにします。
<form onSubmit="return check()" action="mailto:javascript@po.shiojiri.ne.jp">
<input type="checkbox"><input type="text" name="DB0"><br>
<input type="text" name="DB1"><br>
<input type="checkbox"><input type="text" name="DB2"><br>
<input type="checkbox"><input type="text" name="DB3"><br>
<input type="text" name="DB4"><br>
<input type="submit" value="送信">
</form>
このようにしておき以下のようにelementsでの参照部分を「名前＋番号」で自動生成し参照するようにします。
for (i=0; i<5; i++)
{
txt = document.forms[0].elements["DB"+i].value;
}
このようにすると"DB"+iの部分が
iが0の時には DB0
iが1の時には DB1
iが2の時には DB2
iが3の時には DB3
iが4の時には DB4
iが5の時には DB5
のようになります。これでelements部分で空欄チェックの対象となるテキストフィールド（ここではDB0,DB1,DB2,DB3,DB4,DB5）のみ参照するようになります。「名前＋番号」で管理するとこのように便利な面もあります。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
for (i=0; i<5; i++)
{
txt = document.forms[0].elements["DB"+i].value;
if (txt == "")
{
alert("未入力です");
return false;
}
}
return true;
}
// --></script>
</head>
<body>
<form onSubmit="return check()" action="mailto:javascript@po.shiojiri.ne.jp">
<input type="checkbox"><input type="text" name="DB0"><br>
<input type="text" name="DB1"><br>
<input type="checkbox"><input type="text" name="DB2"><br>
<input type="checkbox"><input type="text" name="DB3"><br>
<input type="text" name="DB4"><br>
<input type="submit" value="送信">
</form>
</body>
</html>
「名前＋番号」を使って空欄チェックができればよいのですが、cgiなどとの兼ね合いで、どうしても任意の名前を付ける、名前＋番号にすることができない事もあります。
次回は「名前＋番号」では駄目な場合について、どうすれば良いか説明します。