Hatena::ブログ(Diary)

bonlife このページをアンテナに追加 RSSフィード

言及ISBN/ASIN
  • Ringo EXPO 08 [DVD]
  • 三文ゴシップ
  • my way
  • ビジネスパーソンのための話し方入門 (日経文庫)
  • ザ・グーグルウェイ グーグルを成功へ導いた型破りな戦略
  • 考え・書き・話す3つの魔法
  • 自分の答えのつくりかた―INDEPENDENT MIND

2006-02-10 配列って奥が深いですね。

JavaScriptで複数のcheckboxの状態をチェックし、PHPで表示

人力検索はてなでの質問(http://www.hatena.ne.jp/1139557333)の回答を少し修正しました。PHPデータを処理させる場合、配列になる項目のnameの末尾に括弧をつけておく必要があるのですが、これをJavaScriptで処理しようとするとちょっとややこしいのです。JavaScriptでは括弧を付けて明示的に配列にしているつもりでも、値が1個しかない場合には配列として扱われず、lengthなどのメソッドが使えないのです。そこで、値があるかないか、配列かどうか、と二重のチェックをする必要があります。これがちょっと面倒…。ここのサイト(http://web.paulownia.jp/script/tips/array.html)が参考になりました。

回答ではchecked状態になっているcheckboxの数を数える際、nameとcheckedを分けて以下のように記述していました。

if ((document.myForm.elements[i].name==”flag[]”) && (document.myForm.elements[i].checked)) {
    count ++;
}

ところが、よくよく調べてみると以下のような書き方が出来ることが分かりました。

if (document.myForm.elements['flag[]'][i].checked){
    count ++;
}

ソースPHP-usersのログ(http://ns1.php.gr.jp/pipermail/php-users/2001-June/000215.html)です。やはり、JavaScriptPHPで同じことを悩んでいた先人がいたのですね。しみじみ。


書き直したソースは以下の通りです。コメントHTMLPHPの出力部分なども少し修正しております。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScriptで複数のcheckboxの状態をチェックし、PHPで表示するサンプル</title>
<script language="javascript">
<!--
function arraySizeCheck(){
//
// checkboxの個数をチェック
//
// (1) nameがflag[]の有無をチェック
//     falseの場合、checkboxが存在しない
//     return false;で終了し、その後の処理は行わない
// (2) nameがflag[]の配列のlengthをチェック
//     falseになる場合、配列ではない(要素が1つのみ)
//
    if (document.myForm.elements['flag[]']){
        if (document.myForm.elements['flag[]'].length){
            alert(document.myForm.elements['flag[]'].length+"個のcheckboxがあります。");
        }
        else{
            alert("1個のcheckboxがあります。");
        }
    }
    else{
        alert("checkboxが存在しません。");
        return false;
    }
//
// checked状態のcheckboxの個数をチェック
//
// (1) nameがflag[]の配列のlengthをチェック
//     elementsの中で、nameがflag[]であり、なおかつcheckedになっている
//     数だけcountを増加
// (2) flag[]が配列でない場合、要素が1つある、ない、のどちらかになる
//     checkedになっているかどうかを確認
//
    if (document.myForm.elements['flag[]'].length){
        count = 0;
        for (var i=0;i<document.myForm.elements['flag[]'].length;i++){
            if (document.myForm.elements['flag[]'][i].checked){
                count ++;
            }
        }
        alert(count+"個のcheckboxがチェックされています。");
    }
    else{
        if (document.myForm.elements['flag[]'].checked){
            alert("1個のcheckboxがチェックされています。");
        }
        else{
            alert("0個のcheckboxがチェックされています。");
            return false;
        }
    }
}
//-->
</script>
</head>
<body>
	<form name="myForm" action="<?php echo htmlspecialchars($_SERVER[’PHP_SELF’]);?>" method="POST">
		<label for="a">a : </label><input type="checkbox" name="flag[]" value="a" id="a">
		<label for="b">b : </label><input type="checkbox" name="flag[]" value="b" id="b">
		<label for="c">c : </label><input type="checkbox" name="flag[]" value="c" id="c">
		<label for="d">d : </label><input type="checkbox" name="flag[]" value="d" id="d">
		<label for="e">e : </label><input type="checkbox" name="flag[]" value="e" id="e">
		<input type="submit" value="check" onClick="arraySizeCheck()">
	</form>
<?php
	if ($_POST) {
		$flag = $_POST['flag'];
		foreach ($flag as $value) {
			print "<li>" . $value . " がチェックされました。\n";
		}
	}
?>
</body>
</html>

submitボタンのonClickにJavaScript関数を割り当ててますが、本当はonSubmitの方が良かったのかしら。JavaScriptでのチェックで1つもチェックされていない場合、PHPでの処理もさせずに終了、とかしたいんでしょうけど、上のサンプルだと無理ですよね。結局、PHPの処理部分で$_POSTが空の場合は何も出力しない、という形での実装になってしまっています。まぁ、その辺りはまた後で考えてみる、ということで。

それはそうと1つのファイル内にJavaScriptPHPコードを書いてると、単純な変数の書き方も怪しくなってくるから不思議。$なしで変数呼び出そうとしちゃったりして。やっぱりJavaScriptは別ファイルにした方が良いな、という当たり前のことを初めて身をもって実感したbonlifeことジュンイチでした。

itochanitochan 2006/02/15 14:59 しょぼい別案です。
仮のobjにdocument.formをいれて、appendChildでinput type=checkboxを2個追加して、強制的に配列にします。
ループ数から2を引けば、ループ内の処理は配列として扱えるはず。


ダメ?

bonlifebonlife 2006/02/15 23:44 コメントありがとうございます。初めて手探り状態で書いているソースコードにコメントがつきました。嬉しいです。thx。
appendChildとはまた難しいのが出てきました…。(ってそれほど難しくもないのかしら。)
誠に恥ずかしながら現在の知識では「ループ数から」以降の部分が消化しきれておりません。JavaScriptもPHPも初心者なもので。少しずつキチンと勉強しておきます。気が向いたらどこかで全ソースコードを公開していただけると助かります。(って教えて君状態じゃないか。ショボーン。)
それはそうと、日ごとのページではソースコードがキチンと表示されるのですが、個別記事では肝心のJavaScript部分が正しく表示されません。なぜなぜ状態です。

RsRs 2007/11/17 14:50 <?php $_SERVER[’PHP_SELF’]; ?>
これフォームに入れる場合セキュリティ上あやういですね。

<?php echo htmlspecialchars($_SERVER[’PHP_SELF’]);?>
または、
<?php echo $_SERVER[’SCRIPT_NAME’]; ?>
に変更することをお勧めいたします。

bonlifebonlife 2007/11/18 21:39 ご指摘ありがとうございます。

http://itpro.nikkeibp.co.jp/article/COLUMN/20070227/263356/

これですよね。
動けば良いや、なソースが多かった時代の簡易スクリプトをそのまま流用してたりするので、セキュリティは問題アリですね。
(PHPのセキュリティの本も読んだんですけど、これ書いたのより後だったような。)

そこより直したいところがいっぱいありますが、とりあえず直しておきます!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/bonlife/20060210/1139591861