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); }
とすれば、はい・いいえの数を取得できます。