- フォーム1 -

indexに戻る JavaScriptの基本 用語解説 使えるJavaScript

ダイアログボックス ウィンドウ イベント ロールオーバー 演算子 配列 日付

正規表現 DOM 関数 数学関数（Math） 画像 フォーム1 フォーム2 フォーム3

【サンプル】カウントダウン 【サンプル】カウントダウン実践 【サンプル】タグ（文章の）の入れ替え 【サンプル】カルーセルスライダー 【サンプル】フリックスライダー 【サンプル】拡大写真ライダー

jQueryの基本 擬似クラス CSSの制御 jQueryサンプル

formsプロパティ

Documentオブジェクトの一つ

HTMLの中に書かれている<form></form>タグを参照するプロパティ。

forms[添え字]で使用する。 <form>のname　と同じ働きをする。

<script type="text/javascript">
	function Confi(){
		a = document.forms[0].length;
		alert(a);
	}
</script>

<form></form>で使われている、Elementの数を返す。

formでのみ使用する言葉。form全体

elementsプロパティは連想配列です。elements[参照番号]

elements[]で取り出せる値はradioは個別に1個ずつ、selectはそれで1つと数えます。 name="***"　と入っているので、selectはそれで1つなのだ！

value	文字を取り出す	文字列
type	radioやtext等、type属性を取り出す	type属性
checked	radioで、チャックされている値を取り出す	trueかfalse
selectedIndex	セレクトメニューの内容を上から順に0番目〜値を取り出す	数字

＜＜例文：HTML＞＞

<form name="myF">
名前：<input type="text" name="text1" /><br />
住所：<input type="text" name="text2" /><br />
<input type="radio" name="BtnM" value="man" checked />男
<input type="radio" name="BtnF" value="woman" />女
<input type="radio" name="BtnU" value="uncertainty" />不明<br />
趣味：
		<select name="mySel">
			<option value="昼ね">昼ね
			<option value="釣り">釣り
			<option value="ドライブ">ドライブ
		</select><br />
感想：<textarea name="kansou" rows="4" cols="40" wrap="hard">
　　　感想をどうぞ</textarea><br />

<input type="button" value="内容を確認" onClick="Confi()" />
</form>

＜＜例文：JavaScript＞＞

<script type="text/javascript">
	function Confi(){
		a = myF.elements[0].value; //名前の値を取り出す
		b = myF.elements[1].value; //住所の値を取り出す

		for(i=2; i<5; i++){ //性別の値を取り出す
			check = myF.elements[i].checked;
			if(check==true){
				c = myF.elements[i].value;
			}
		}

		d = myF.mySel.options[myF.mySel.selectedIndex].text;
		　　//趣味の値を取り出す
		e = myF.elements[6].value; //住所の値を取り出す
		

		subWin=window.open("about:blank","form_data",
		　　　"width=550,height=700");
		subWin.document.open();
			subWin.document.write("名前：",a,"<br>");
			subWin.document.write("住所：",b,"<br>");
			subWin.document.write(c,"<br>");
			subWin.document.write(d,"<br>");
			subWin.document.write(e);
		subWin.document.close();
	}
</script>

■エレメントの参照

<script type="text/javascript">
	function Confi(){
		c = myF.elements[0].type;
		alert(c);
	}
</script>

form（myF）の中のelements（部品）に何を使っているか（type）知りたい。
type="***"　の部分を参照する。

■エレメントに何が書かれているか知りたい

<script type="text/javascript">
	function Confi(){
		c = myF.elements[0].value;
		alert(c);
	}
</script>

フォームに入力された中身を参照出来ます。
value　とあるので、radioやbuttonの場合はvalue="man"　の値を参照します。

※個別に参照したい時は、elements[]の部分をname="***"　に置き換える。

■radio　の値の取り出し方

<script type="text/javascript">
	function Confi(){
		a = myF.elements[2].checked; //チェックされていたらtrueが返される
		b = myF.elements[3].checked;
		c = myF.elements[4].checked;

		if(a==true){
			d = myF.elements[2].value;
			alert(d);
		}else if(b==true){
			e = myF.elements[3].value;
			alert(e);
		}else{
			f = myF.elements[4].value;
			alert(f);
		}
	}
</script>

■for文を使って1つにする方法

<script type="text/javascript">
	function Confi(){
		for(i=2; i<5; i++){
			a = myF.elements[i].checked;
			if(a==true){
				d = myF.elements[i].value;
				alert(d);
			}
		}
	}
</script>

■複数選択のチェックボックスの値の取り出し方

<script type="text/javascript">
		function Confi(){
			var aa = ""; //内容が空のローカル変数aaを作る

			for(i=0;i>4;i++){
				checkD = myF.elements[i].checked;
				if(checkD==true){
					nameD = myF.elements[i].value;
					aa = aa+nameD+"　";
					    //空のaaにどんどん文字を入れていく
				}
			}
			alert(aa);
		}
</script>

■セレクトの中身を取り出す

<script type="text/javascript">
	function Confi(){
		a=myF.mySel.options[myF.mySel.selectedIndex].text;
		alert(a);
	}
</script>