Lightbox Info Board : SQLの窓

name 参照


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	if ( document.getElementsByName("field1")[0].value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	if ( document.getElementsByName("field2").item(0).value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

	<INPUT type="text" name="field1">
	<INPUT type="text" name="field2">
	<INPUT type="submit" name="send" value="送信">

</FORM>

</BODY>
</HTML>

id 参照

id は、一意な参照用の名称です。id があれば、確実に参照できます

よく失敗するのは、getElementsByName と getElementById の Elment の複数形と単数形の "s" の違いです
コードをコピーして使う時に間違うので注意してください。


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	if ( document.getElementById("in1").value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	if ( document.getElementById("in2").value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	alert( document.getElementById("in3").value );

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

	<INPUT type="text" name="field1" id="in1">
	<INPUT type="text" name="field2" id="in2">
	<INPUT type="submit" name="send" value="送信" id="in3">

</FORM>


</BODY>
</HTML>

tagname 参照

id や name の無い場合、タグ名だけで絞って行く参照方法です。
各エレメントのオブジェクトでは、子要素に対して getElementsByTagName が使用できます。
( id や name 参照ができるのは、document オブジェクトからのみです )


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function CheckData() {

	var Section1 = document.getElementsByTagName("TABLE")[0]
	var Section2 = document.getElementsByTagName("TABLE")[1]

	alert( Section1.getElementsByTagName("INPUT").length );
	alert( Section2.getElementsByTagName("INPUT").length );

	if ( Section1.getElementsByTagName("INPUT")[0].value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	if ( Section2.getElementsByTagName("INPUT")[0].value == '' ) {
		alert( "必須入力です　　　" );
		return false;
	}

	return true;

}

</SCRIPT>
</HEAD>
<BODY>

<FORM onSubmit='return CheckData()'>

<TABLE><TR><TD>
	<INPUT type="text">
	<INPUT type="text">
</TD></TR></TABLE>

<TABLE><TR><TD>
	<INPUT type="text">
	<INPUT type="text">
</TD></TR></TABLE>

<INPUT type="submit" name="send" value="送信">

</FORM>


</BODY>
</HTML>

コンボボックスのデータ参照

クライアントの処理で、テキストフィールドの次に重要なコントロールです。
まずは、コンボボックスのデータを取得します。

テキストデータの取得方法が重要です。
obj.getElementsByTagName("OPTION")[nIndex]　では、OPTION ダグのノードオブジェクト
が取得されますが、その中のテキストは OPTION ノードに所属するのでは無く、目に見えないテキストノード
の値となります。その為、.firstChild.nodeValue という参照になっています

但し、OPTION ノードを取得するのに getElementsByTagName を使用してタグ名で取得しているので
必要なコレクションしか取得されない為、選択されたインデックスを使用して取得できます。
もし、これが childeNodes によって取得されていた場合、#text ノードが混ざってしまう為、正しく動作しません


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function ComboData() {

	var i,str="",nIndex,obj;

	str += "value値=";
	// 現在選択されている value 値
	str += document.getElementsByName("combo")[0].value;
	str += "<br>";

	str += "text値=";
	// 現在選択されている text 値
	obj = document.getElementsByName("combo")[0];
	nIndex = obj.selectedIndex;
	// タグ名で取得する為、#text ノードは存在しません
	str += obj.getElementsByTagName("OPTION")[nIndex].firstChild.nodeValue
	str += "<br>";

	document.getElementById("data").innerHTML = str;

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='ComboData()'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="実行" onClick='ComboData()'>

<br><br>
<DIV id="data"></DIV>

</BODY>
</HTML>

<SCRIPT type="text/javascript" for="window" event="onload">

	ComboData();

</SCRIPT>

以下は、コンボボックスにデータを追加する例です。
このあたりから、直感的に処理しようとすると、クロスブラウジングが必要になってきますが、
最終行に追加するにあたって、クロスブラウジングしない方法もあります

エレメントにテキストノードを追加するのに、document.createTextNode("文字列") で作成したものを
使用しますが、innerHTML を使用するほうが簡単で、拡張性の高いものとなります。


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ－タ1.5") )
//	innerHTML のほうが簡単で拡張性が高い
//	newNode1.innerHTML = "デ－タ1.5";
	newNode1.value="1.5"

	// 最後に追加はクロスブラウジング
	if ( document.all ) {
		// SELECT から appendChild は出来ない
		targetNode.options.add( newNode2 );
		newNode2.innerText = "デ－タ9";
		newNode2.value = "9";
	}
	else {
		targetNode.appendChild( newNode2 );
		newNode2.appendChild( document.createTextNode("デ－タ9") );
		newNode2.value="9";
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>

以下は、クロスブラウジングしない方法です。


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ－タ1.5") )
	newNode1.value="1.5"

	// クロスブラウジングしない追加処理
	// 最後のノード
	var lastNode = targetNodeList.item( targetNodeList.length - 1 );
	// 最後のノードをコピー ( true は childNodes もコピーする )
	var cloneNode = lastNode.cloneNode( true );
	// 挿入
	targetNode.insertBefore( cloneNode, lastNode );
	// 最後のノードを変更
	lastNode.firstChild.nodeValue = "デ－タ9"
	lastNode.value = "9"

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>

以下は、コンボボックスのリストの削除です。


<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function RemoveComboData() {

	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");

	var i,length = targetNodeList.length;

	for( i = length-1; i >= 0; i-- ) {
		targetNode.removeChild( targetNodeList.item( i ) );
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo">
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="削除" onClick='RemoveComboData()'>

</BODY>
</HTML>