PHPへチェックボックスの値の渡し方
御世話になります。
PHPとMySQL(サーバーサイド)とJavascript(クライアントサイド)を使って、会社で製造している各製品の構成部品と数を表すBOM(Bill Of Material)のデータベースを作っています。
Javascriptで動的に生成したチェックボックスの、チェックされた状態をPHPに渡そうとしていますが、上手く行きません。
どなたか、詳しい方のお知恵を拝借できれば有難いと思っております。
今作成中のプログラムは結構長いものなので全部をここにコピーしてくるわけには行きませんが、要点は次の様なものです。
1:クライアントサイドで製品の識別用番号と改訂版番号を入力して、AJAXを使って該当する製品の構成部品とオプション、およびそれぞれの必要数量をサーバーに要求する
2:サイバーでは要求されたデータをデータベースから抽出して、JSON型式でクライアントに送る
3:クライアントは受け取ったデータから、まず複数あるオプションをチェックボックスで選択できるように、チェックボックス、各オプションの番号、その説明文を動的に生成する
4:更にクライアントは必要なオプションを示すチェックボックスにチェックマークを入れ(複数可能)、送信ボタンを押す
5:サーバーはPOSTで受け取った、チェックマークの付いたオプションと、その他の構成部品とそれぞれの数量をテーブル形式でスクリーンに表示する
大まかには以上のような流れになりますが、4:から5:へのチェックボックスの状態がどうしてもPHPに渡せません。
以下に、この問題に関係すると思われるソースコードをコピーします。
<script>
function getData(){
var target = document.getElementById("options");
target.value="";
var num = document.getElementById("PN").value; // user input value
var rev = document.getElementById("mySelect").value; // selected value
document.getElementById("pRev").value=rev;
var xmlhttp = new XMLHttpRequest();
// send partNumber + revision as one entity
xmlhttp.open("GET", "JSON-TEST4.php?object=" + num + "&revision=" + rev , true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){ //AJAX starts
if(this.readyState == 4 && this.status == 200){
var object = JSON.parse(this.responseText);
var optCount = object.optionCount;
document.getElementById("partID").value= object.id; // hidden input element
document.getElementById("optCount").value= optCount;// hidden input element
document.getElementById("DS").innerHTML = object.description;
// create checkboxes for selecting options
for(var i=0; i<optCount; i++){
var checkbox = document.createElement("input"); // make checkbox
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("name", "check" + (i+1));
checkbox.setAttribute("value", "checked");
var inputPN = document.createElement("input"); // make input for option part number
inputPN.setAttribute("type", "text");
inputPN.setAttribute("name", "pn" + (i+1));
inputPN.setAttribute("value", object.optPN[i]);
var inputDS= document.createElement("input");// make input for option description
inputDS.setAttribute("type", "text");
inputDS.setAttribute("name", "ds" + (i+1));
inputDS.setAttribute("value", object.optDS[i]);
inputDS.setAttribute("size", "80");
var br = document.createElement("br");
// paste newly created HTML tags inside <td> with id="options"
//target = document.getElementById("options");
target.appendChild(checkbox);
target.appendChild(inputPN);
target.appendChild(inputDS);
target.appendChild(br);
}
}// if readyState
}// AJAX function
}// getData()
</script>
HTML の該当部分は
<table class="queryTable">
<tr>
<th class="pNum"> Input Part Number</th>
<th class="pRev"> Select Revision </th>
<th class="pDesc"> Description</th>
<th class="pOpt"> Check Options</th>
<th class="pAct"> Action </th>
</tr>
<tr>
<td>
<form id="myform1" method="POST" action="displayBOMlist.php" target="workspace" >
<input type="text" name="instrumentPN" id="PN"><BR>
<input type="button" value="show revisions" onclick="showRev()">
</td>
<td>
<div id="RV"></div>
<button type="button" onclick="getData()">show detail</button>
</td>
<td id="DS"> </td>
<td id="options"></td>
<td >
<input type="hidden" name="partID" id="partID" >
<input type="hidden" name="pRev" id="pRev">
<input type="hidden" name="optCount" id="optCount">
<input type="submit" value="Display BOM">
</form>
</td>
</tr>
</table>
PHP側の該当部分は
$options = array();
for($i= 0; $i < $optCount; $i++){
$checkNum="check".(string)($i+1);
$checkPart="pn".(string)($i+1);
if( isset($_POST[$checkNum]) ){
$options[]=$_POST[$checkPart];
echo "set part=".$_POST[$checkNum]."<BR>";
}
お礼
お返事ありがとうございます。
補足
(1) <TD><INPUT type="text" name="バッチNo." id="text1" size="30" class="ws1" value="<?php echo $list[0];?>"> (2) <TD><INPUT type="text" name="バッチNo." id="text1" size="30" class="ws1" value="<?php echo $list['tokuisaki_syamei'];?>"> ↓ これがset_form($list)の中身の一行です。 もちろん、echo <<<EOM ~ EOM; で、ヒア文字列で 書いています。もしかして、ヒア文字列が原因とかでしょうか。