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

| 2007年12月08日 02:19

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>

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

トラックバック
  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/197
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?

このサイトは次のライセンスで保護されています。

Creative Commons License

Kantenna by Kantenna_Admin is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Japan License.
IT業界、エンジニア関連の求人
Web業界に精通したエージェントなので、希望に合った仕事、プロジェクト、雇用形態を紹介してくれてしっかりと転職活動をサポートしてくれます。
初心者のみ採用！【スノーグラス】ＷＥＢ系エンジニア募集
初心者のみのweb系エンジニア求人!なんでだ?そろそろ転職考えてるのでここ行ってみようかな・・・
Twitter Updates