KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > javascript フォーム関連オブジェクトの取得

javascript フォーム関連オブジェクトの取得

javascriptでよくアクセスするフォーム関連の要素のベーシックな取得方法。

javascript サンプル

    //フォームの要素の総数取得
    FormNum_ver1 = document.forms[0].length;//番号による取得
    FormNum_ver2 = document.MyForm.length;//名前による取得

    //テキストボックスの値
    Text_ver1 = document.forms[0].elements[0].value;
    Text_ver2 = document.MyForm.Text.value;

    //テキストエリアの値
    Text_Area_ver1 = document.forms[0].elements[1].value;
    Text_Area_ver2 = document.MyForm.TextArea.value;

    //チェックボックスの値
    CheckBox_ver1 = document.forms[0].elements[2].value;
    CheckBox_ver2 = document.MyForm.CheckBox[0].value;

    //チェックボックスの初期状態
    CheckBox_chk = document.MyForm.CheckBox[0].defaultChecked;

    //チェックボックスが何個あるか
    CheckBox_num = document.MyForm.CheckBox.length;

    //ラジオボタンの値
    Radio_ver1 = document.forms[0].elements[5].value;
    Radio_ver2 = document.MyForm.RadioGroup1[0].value;

    //ラジオボタンの初期状態
    Radio_chk1 = document.MyForm.RadioGroup1[0].defaultChecked;
    Radio_chk2 = document.MyForm.RadioGroup1[1].checked;

    //セレクトメニュー
    Select_ver1 = document.forms[0].elements[7].value;
    Select_ver2 = document.MyForm.Select.value;


    //セレクトメニューの選択項目の値
    Select_list1 = document.MyForm.Select.options[0].value;

    //セレクトメニューの選択項目の数
    Select_listNum = document.MyForm.Select.options.length;

    //セレクトメニューの選択されてる項目
    Select_selected = document.MyForm.Select.selectedIndex;

    //セレクトメニューの選択されてる項目の値
    Select_selectedValue = document.MyForm.Select.options[document.MyForm.Select.options.selectedIndex].value;

HTMLサンプル

<form name="MyForm">

    <p><input name="Text" type="text" value="これはテキストボックス" /></p>
    <p><textarea name="TextArea" cols="" rows="">ここはテキストエリア</textarea></p>
    <p>
    <input name="CheckBox" type="checkbox" value="チェックボックス1" checked="checked" />チェックボックス1<br />
    <input name="CheckBox" type="checkbox" value="チェックボックス2" />チェックボックス2<br />
    <input name="CheckBox" type="checkbox" value="チェックボックス3" />チェックボックス3
    </p>

    <p>
    <input name="RadioGroup1" type="radio" value="ラジオ1" checked="checked" />ラジオ1<br />
    <input name="RadioGroup1" type="radio" value="ラジオ2" />ラジオ2
    </p>

    <p>
    <select name="Select">
    <option value="選択リスト1">選択リスト1</option>
    <option value="選択リスト2">選択リスト2</option>
    <option value="選択リスト3" selected="selected">選択リスト3</option>
    </select>
    </p>

</form>