PHPへチェックボックスの値の渡し方

質問

御世話になります。
PHPとMySQL（サーバーサイド）とJavascript（クライアントサイド）を使って、会社で製造している各製品の構成部品と数を表すBOM（Bill Of Material）のデータベースを作っています。
Javascriptで動的に生成したチェックボックスの、チェックされた状態をPHPに渡そうとしていますが、上手く行きません。
どなたか、詳しい方のお知恵を拝借できれば有難いと思っております。

今作成中のプログラムは結構長いものなので全部をここにコピーしてくるわけには行きませんが、要点は次の様なものです。

１：クライアントサイドで製品の識別用番号と改訂版番号を入力して、AJAXを使って該当する製品の構成部品とオプション、およびそれぞれの必要数量をサーバーに要求する
２：サイバーでは要求されたデータをデータベースから抽出して、JSON型式でクライアントに送る
３：クライアントは受け取ったデータから、まず複数あるオプションをチェックボックスで選択できるように、チェックボックス、各オプションの番号、その説明文を動的に生成する
４：更にクライアントは必要なオプションを示すチェックボックスにチェックマークを入れ（複数可能）、送信ボタンを押す
５：サーバーはPOSTで受け取った、チェックマークの付いたオプションと、その他の構成部品とそれぞれの数量をテーブル形式でスクリーンに表示する

大まかには以上のような流れになりますが、４：から５：へのチェックボックスの状態がどうしても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>";
}

回答No.5

AsarKingChang · ベストアンサー

>調べて頂いているsetAttribute( )関数への対処法については、ご回答を心待ちしていますが、一応ご報告いたします。
ぶっちゃけ＾＾わすれてた＾＾あはは

たしかこれなんですが、起動より前にすでにあったものと
起動した後に作られた変数/ノードでの違いの問題なんですよね。
ただ、言う通りtype=hiddenの方が、はっきり言って安定します。
また、そういう言うものがある！という宣言も事前に出来る事と。
「デフォルト値」が書けるメリットがありますからね。
書き換えなければ「書き換えていない値」が送られるので、
isset($_POST["なんとか"]) がいらなくなるメリットは大きいです。
無理にDOM構築するよりは、type=hiddenの方が、
正直楽ですがね。

お礼

回答ありがとうございます。
私の無理に動的生成エレメントにこだわらず、これで行きたいと思います。またPHPやJSをやっていくと、何かの機会に今回の質問のヒントのようなものにぶち当たるかもしれません。今回はAsarKingChangさんの貴重な時間を頂き、有難うございました。この質問はこれで締め切らせていただきます。
また何か別の質問でお話しできると嬉しいです。

回答No.4

AsarKingChang

>Javascriptの関数で動的に生成したチェックボックスなどの<input> エレメントは、name とその値(check1, check2, pn1, pn2, ds1,ds2 等)のペアーをsetAttribute()で設定してあるのに、なぜ$_POST変数に入ってないのでしょうか？

少なくとも原因は、わかりましたね。
次は対処の方ですが＾＾
ちょっと、忘れたんですが、”setAttribute”これがいけなかったはず。
対処法を忘れました＾＾
ちょっと調べてみます。
先追加と、後追加
（正確にはメモリ内でのみ追加されてるメソッドの違い）
での挙動の違いで、私も、トラブったことがありまして。

お礼

お礼が遅れて申し訳ありませんでした。
動的に生成したエレメントのname属性を＄＿POST変数の中に直接取り込むことが難しいので、この方法による解決案は一応棚上げにしておき、別のやり方で送る方法を考えていました。
そこで考えたのが、<input type="hidden">で送るやり方です。このinput エレメントのname属性に、動的に生成したエレメントのname属性を、値を変えて代入しておけば＄＿POST変数の一つとして送ることが出来ます。
この方法で一応はユーザーが選択したオプションを送れるようになりました。
AsarKingChang さんが調べて頂いているsetAttribute( )関数への対処法については、ご回答を心待ちしていますが、一応ご報告いたします。

回答No.3

AsarKingChang

盛大に略しますが。
>「PHP側の該当部分」としてあるのは「HTML の該当部分」にある<form method="POST" action="displayBOMlist.php">
>そのname=check1 や name=check2 などはPOSTで送られて

print_r($_GET); ← GET用
print_r($_POST); ← POST用
この関数、行セパレーターが"\n"なので、
ブラウザでは、改行が見えないので、<pre>～</pre>を
前後に入れると見やすいです。
デバッガーならそのままでもいい。
こいつらで、値がそもそも来ているのか？
という所から、見てみると良いかと思います。
（根元からどの値がどこに向かったかを追いかける方が、
　大抵、解決が早いので）

お礼

ご回答有難うございます。
PHP側に次のコードを挿入してみました。
echo "<pre>";
print_r($_POST);
echo "</pre>";

結果は以下のものです。
Array
(
[instrumentPN] => 010-126-20
[partID] => 302
[pRev] => 00
[optCount] => 3
)
これらは全て<form>の中で<input> として値を直接あるいはJavascriptの文で代入したものです。
<input type="text" name="instrumentPN" id="PN"><BR>
<input type="hidden" name="partID" id="partID" >
<input type="hidden" name="pRev" id="pRev">
<input type="hidden" name="optCount" id="optCount">

Javascriptの関数で動的に生成したチェックボックスなどの<input> エレメントは、name とその値(check1, check2, pn1, pn2, ds1,ds2 等)のペアーをsetAttribute()で設定してあるのに、なぜ$_POST変数に入ってないのでしょうか？

試しに小さなコードを書いて実験してみましたら、動的に生成したエレメントでも、ちゃんと name とその値がペア―になっていれば$_POSTで送られています。以下に挙げるのがその実験コードです。

<!DOCTYPE HTML>
<html>
<head>
<title> test-createElement.HTML</title>
<script type="text/javascript">
const optPN=["akira", "shiro","Eman"];
const optDS=[35, 72, 65];

function makeElement(){
var target = document.getElementById("place");
// create checkboxes for selecting options
for(var i=0; i<3; i++){
var checkbox = document.createElement("input"); // make checkbox
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("name", "check" + i);
checkbox.setAttribute("value", "checked");

var inputPN = document.createElement("input"); // make input for option part number
inputPN.setAttribute("type", "text");
inputPN.setAttribute("name", "pn" + i);
inputPN.setAttribute("value", optPN[i]);

var inputDS= document.createElement("input");// make input for option description
inputDS.setAttribute("type", "text");
inputDS.setAttribute("name", "ds" + i);
inputDS.setAttribute("value", optDS[i]);
inputDS.setAttribute("size", "40");

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);
}
}
</script>
</head>
<body>
<form method="POST" action="receiveData.php">
<h3> 3 checkboxes will be made below</h3>
<div id="place">
</div>
<input type="button" onclick="makeElement()" value="make element">
<input type="submit" value="OK">
</form>
</body>

[PHP側]
<?php
for ($i=0; $i<3; $i++){
$checkNum = "check".(string)$i;
$partNum = "pn".(string)$i;
$descNum = "ds".(string)$i;
if( isset($_POST[$checkNum])){
echo $_POST[$checkNum]."<BR>";
echo $_POST[$partNum]."<BR>";
echo $_POST[$descNum]."<BR>";
echo "===========<BR>";
}else {
echo $checkNum." is not checked<BR>";
}
}
?>

これを走らせるとチェックボックスを動的に生成して、そのうちの一つをチェックして送信ボタンを押すと、そのチェックが認識されてそれに属するデータが表示されます。
ですから、いま問題にしているプログラムのいずれかに、間違いがあると思うのですが、いくら考えても分かりません。
どうかまた何かアドバイスを頂けると有難いです。

回答No.2

AsarKingChang

もう一つ、Response側、
if(this.readyState == 4 && this.status == 200){
var object = JSON.parse(this.responseText);
JS側で、JSONデコードをしているのですが、
echo　 "set part=".$_POST[$checkNum]."<BR>";
PHP側で、無駄な表示物を発生させてしまっており、
当然JSONパースエラーになります。

基本JSON入出力を目的としたAPI（PHPなど）では、
JSONの外ではなくJSONの「中」にこの手のデバッグは
入れた方がいいですよ。
$out=[];
$out["response"]=ここに、本来APIが返したい情報を入れる。
$out["debug"]=[];　//debugという配列を作成し、配列として初期化。
$out["debug"][]=デバッグ文字; // 自動的に後方結合させ文字を追加
$out["debug"][]=デバッグ文字;
$out["debug"][]=デバッグ文字;
最後に、$outそのものをJSONでクライアントに送り出すように
コーディングすると、本来ほしい情報+デバッグ情報が
混在できるので、その方がいいでしょう。

お礼

ご回答の続きをいただき、有難うございます。
残念ながら、ここで回答者様のおっしゃっている事は私には理解できません。JSONによるデータの受け渡しには何も問題はないので、ご了承ください。

回答No.1

AsarKingChang

これはGETです。
xmlhttp.open("GET", "JSON-TEST4.php?object=" + num + "&revision=" + rev , true);

しかし、PHP側がPOSTになってます。
if( isset($_POST[$checkNum]) ){

さらにいえば、PHPのファイル名であるJSONは
POSTを表す言葉の一つで、JSONエンコーダーを通して
送る事を前提にしています。

ひとまず、今の時点では、$_POSTではなく$_GETに入ってます。
これを、JavaScriptを治してまずは、POSTにしてください。
それが動いたら、JSON形式のPOSTにすることで、
解決します。

お礼

早速にご回答をいただき、有難うございます。
AsarKingChangさんにはいつもお世話になっており、感謝しています。
さて今回の質問はソースコードを掲載しないと問題点を理解してもらうのが難しいと考えたのですが、制限文字数4000字ではどうしても全コードを載せきれず、重要と思われる部分だけを切り取って掲載しました。
そういうわけで回答していただく方には多少の誤解があるかもと、思ってはいましたが、ここでもう少し詳しく説明させてください。
ＡＪＡＸ関数からＧＥＴを使ってデータを要求している相手は、質問内容の中で引用している「PＨＰ側の該当部分」として載せているものではありません。それは　JASON-TEST4.php というもので、そこではちゃんとＧＥＴで受け取った製品番号と改訂版番号をもとにデータを抽出して、json_encode() してからecho文で送っています。
Javascript側ではこれをちゃんと受け取ってjson.parse()して使っています。この部分には問題はありません。
「PHP側の該当部分」としてあるのは「HTML の該当部分」にある<form method="POST" action="displayBOMlist.php"> にある displayBOMlist.php の一部であり、フォームから送られてくるものを処理しようとしています。そしてここで、動的に生成されたチェックボックスのチェック状態を調べようとしているわけです。このチェックボックスは<form></form> の中に入っているJSの関数getData()で生成しているので、そのname=check1 や name=check2 などはPOSTで送られて、受け側のPHPでは$_POST['check1'], $_POST['check2'] などとして認識されるものと考えております。ところがこれが認識されていないので、「なぜ？」というのが私の質問です。
問題解決に役立つであろうプログラムの全ソースコードを何らかの方法で掲載できればいいのですが。「補足する」に入れようとしても、やはり制限4000字では無理です。
何かお考えがあればお知らせください。
よろしくお願いいたします。