JavaScriptを使うと、フォームの部品にユーザーが入力した情報を取得する事ができます。入力された情報を調べればフォームの送信前に必須事項が入力されているか確認したり、入力内容に応じてメッセージを出したり、といろいろ応用できそうですね。
フォームの部品の内容を取得するには、フォームと部品に名前(name属性)を設定し、その名前を指定して情報を取得します。例えばフォームform1内のテキストフィールドtext1の内容は、
form1.text1.value
を読む事で取得できます。下のフォーム内のテキストフィールドに適当な文字列を入れて「テスト」ボタンをクリックしてみてください。テキストフィールドの内容がポップアップされます。
<form name="form1" onSubmit="alert(form1.text1.value)">
<p><input type="text" name="text1"></p>
<p><input type="submit" value="テスト"></p>
</form>
フォーム内の部品の情報を得るにはもうひとつフォーム配列を使う方法もあります。これは、フォーム内の部品を配列として扱う方法で、フォームのelements配列でフォーム内の部品にアクセスできます。例えば、
<form name="form2" onSubmit="test1()">
<p>部品1<input type="text"><br>
部品2<input type="text"><br>
部品3<input type="text"></p>
<p><input type="submit" value="テスト"></p>
</form>
上のような3つのテキストフィールドを持つフォームを作ると、onSubmitに指定したtest1()内でフォームのelements配列を見ればテキストフィールドの内容を取得できます。
function test1() {
str="";
for (i=0;i<3;i++) {
str+=document.form2.elements[i].value+"\n";
}
alert(str);
return false;
}
このようにフォームの配列を使うとフォーム要素に「番号」でアクセスできるので、処理を定型化しやすいのが大きな利点ですね。特に、ラジオボタンやチェックボックスのチェックには有効でしょう。
下のフォームには、6組のはい・いいえラジオボタンがあります。このラジオボタン群でチェックされているはい・いいえそれぞれの数を求める、という場合もフォーム配列を使えば一発です。
<form name=form3 onSubmit="test2()">
<p>1.<input type=radio name="no1" value="はい">はい <input type=radio name="no1" value="いいえ">いいえ<br>
2.<input type=radio name="no2" value="はい">はい <input type=radio name="no2" value="いいえ">いいえ<br>
3.<input type=radio name="no3" value="はい">はい <input type=radio name="no3" value="いいえ">いいえ<br>
4.<input type=radio name="no4" value="はい">はい <input type=radio name="no4" value="いいえ">いいえ<br>
5.<input type=radio name="no5" value="はい">はい <input type=radio name="no5" value="いいえ">いいえ<br>
6.<input type=radio name="no6" value="はい">はい <input type=radio name="no6" value="いいえ">いいえ<br>
<p><input type="submit" value="テスト"></p></form>
</form>
この場合、「はい」の番号は0,2,4と偶数、いいえは1,3,5と奇数になるので、
function test2() {
yes=0;
no=0;
for (i=0;i<6;i++) {
if (document.form3.elements[i*2].checked)
yes++;
else if (document.form3.elements[i*2+1].checked)
no++;
}
alert("はい="+yes+" いいえ="+no);
}
とすれば、はい・いいえの数を取得できます。