フォーム部品の入力確認

 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配列でフォーム内の部品にアクセスできます。例えば、

フォーム配列のテスト

部品1
部品2
部品3

上のフォームのソース

  <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組のはい・いいえラジオボタンがあります。このラジオボタン群でチェックされているはい・いいえそれぞれの数を求める、という場合もフォーム配列を使えば一発です。

1.はい いいえ
2.はい いいえ
3.はい いいえ
4.はい いいえ
5.はい いいえ
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);

  }

 とすれば、はい・いいえの数を取得できます。

戻る