目次

オブジェクトなJavaScriptの基礎講座

forms/elements配列の使い方

◆ 概説

通常、フォームのオブジェクトを参照するときは document.フォーム名.部品名 になりますが、
forms配列とelements配列を使っても参照することができます。
今回はforms配列とelements配列を説明致します。

適用方法

forms[]とelements[]で指定する添え字は 0 番からで、それぞれフォームまたは部品が定義された順に、 0,1,2,3,…と割り当てられます。 forms[0].elements[0]で示す部品の値を取得するには forms[0].elements[0].value とします。

例、各テキストボックスに入力後、確認ボタンのクリックで、その内容をテキストエリアに表示する。

<p>
<script type="text/javascript">
     function disp(){
        var i, n, m;

        n = document.TestForm.elements.length;
        m = "";
        for (i = 0; i < n-2; i++){
             m = m + document.TestForm.elements[i].name + ":"
                   + document.TestForm.elements[i].value + "\n";
        }
        document.TestForm.Msg.value = m;
     }     
</script>
</p>
<form name="TestForm">
<p>
NAME:<INPUT TYPE="text"   NAME="Name" SIZE=20><br>
AGE :<INPUT TYPE="text"   NAME="Age" SIZE=6><br>
JOB :<INPUT TYPE="text"   NAME="Job" SIZE=20><br>
<INPUT TYPE="button" NAME="bt" VALUE="確認" onClick="disp()">
<TEXTAREA NAME="Msg" ROWS=4 COLS=30></TEXTAREA>
<p>
</form>

例の処理結果

テキストボックス
NAME:
AGE :
JOB :

テキストエリア

目次