SQLの窓

2014年06月05日


PHP : HTMLのinput要素のname属性に二次元配列を指定して getElementsByName と jQueryのinput[name='value']:eq(n) でアクセステスト

結論から言えば、書き方だけの問題で、思った通りに動作します。ただ、JavaScript でアクセスする場合は id 属性を定義するほうが良いです。しかし、名前に関して二重の管理が必要になるのを避けたい場合はこのような方法も選択肢の一つではあると思います。

※ PHP 側のアクセスは、最初からグループ分けが可能ですし、便利な書き方です。



DOM を使ったコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkForm() {

	if ( !confirm("送信してよろしいですか?") ) {
		return;
	}

	// 本来は、ここで入力チェックを実行し、
	// エラーならば return false; を実行する

	var obj;

	obj = document.getElementsByName("list[in][]");
	alert(obj[0].value);
	alert(obj[3].value);
	obj = document.getElementsByName("list[out][]");
	alert(obj[0].value);
	alert(obj[3].value);

	return true;
}
</script>
</head>
<body>
<form onsubmit='return checkForm();'>
<input type="submit">
<br>
<input type="text" name="list[in][]" value="A">
<input type="text" name="list[in][]" value="B">
<input type="text" name="list[in][]" value="C">
<input type="text" name="list[in][]" value="D">
<br>
<input type="text" name="list[out][]" value="V">
<input type="text" name="list[out][]" value="W">
<input type="text" name="list[out][]" value="X">
<input type="text" name="list[out][]" value="Y">
</form>


<pre>
<?php
print_r($_GET);
?>
</pre>
</body>
</html>


jQuery を使ったコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	// ***********************************************
	// Form が送信前に実行されるイベント
	// event.preventDefault(); で送信をキャンセル
	// ***********************************************
	$( "form" ).submit(function( event ) {
		if ( !confirm("送信してよろしいですか?") ) {
			event.preventDefault();
			return;
		}

		// 本来は、ここで入力チェックを実行し、
		// エラーならば event.preventDefault() を実行する

		alert( $("input[name='list[in][]']:eq(0)").val() );
		alert( $("input[name='list[in][]']:eq(3)").val() );

		alert( $("input[name='list[out][]']:eq(0)").val() );
		alert( $("input[name='list[out][]']:eq(3)").val() );

	});

});
</script>
</head>
<body>
<form>
<input type="submit">
<br>
<input type="text" name="list[in][]" value="A">
<input type="text" name="list[in][]" value="B">
<input type="text" name="list[in][]" value="C">
<input type="text" name="list[in][]" value="D">
<br>
<input type="text" name="list[out][]" value="V">
<input type="text" name="list[out][]" value="W">
<input type="text" name="list[out][]" value="X">
<input type="text" name="list[out][]" value="Y">
</form>


<pre>
<?php
print_r($_GET);
?>
</pre>
</body>
</html>



【PHPの最新記事】
posted by lightbox at 2014-06-05 02:20 | PHP | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり