チェックボックスの中味を送信できません

昨日、Ajax通信で受け取ったデータをチェックボックスに反映する方法を教わった者です。
今度は送信で悩んでいます。

表のデータをPOSTで送るんですが、テキストのところ（「td」に書かれたものや input type="text" の部分）
は問題なく渡せました。
でもまたまたチェックボックスでつまずいています。
★☆★☆★☆★☆の部分ですが、プログラムは通るのですが、チェックボックスの内容（チェックか否か）を
拾ってくれません。
また、rows[i].getElementByTagName("sendF[]") などとやってみたんですが、エラー（not a function）が出てしまいます。

どなたかご指導下さい。
よろしくお願いします。


$.ajax({
type: "POST",
url: "../SendList.php",
data: {"condition":condition}, // Webサーバに送信するデータ
dataType: 'text', // Webサーバか受信するデータの形式

success: function(request){ // ajax通信が成功したときの処理
var json = JSON.parse(request);
var res = '';

for (var i = 0; i < json.length; i++){
res += '<tr>'
+ '<td style="text-align: center;">' + json[i].personId + '</td>'
+ '<td style="text-align: center;">' + json[i].personName + '</td>'
+ '<td style="text-align: center;">';

// 値を checkbox のチェックに差し込む
if(json[i].sendF == 1){
res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" checked />';
} else {
res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF[]" />';
}

res += '</td >'
+ '<td style="text-align: left;">'
+'<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />'
+ '</td >'
+ '</tr>';
}
var obj = document.getElementById("datatable");
obj.innerHTML ='<table id="tbl_correspondUpdate" class="customerlist"><tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>'
+ res
+ '</table>'
+ '<br />'
+'<p class="condition_submit">'
+ '<input id="btnUpdate" type="button" onclick="doActionUpdate();" value="更新" />'
+ '</p>';
},
error: function(msg){ // ajax通信が失敗したときの処理
alert( "Data Saved: " + msg );
}
});
}


// 「更新」ボタンクリック
function doActionUpdate(){
var tbl = document.getElementById("tbl_correspondUpdate");
var cols = tbl.rows[0].cells.length;// 列数
//var rows = tbl.rows.length; // 行数
var rows = tbl.rows;

// 行に対するループ
for (var i=1; i<rows.length; i++) {

var sendF;
if(rows[i].cells[6].checked){★☆★☆★☆★☆// →　通るものの拾わない

//var elm = rows[i].getElementByTagName("sendF[]");// →　not a function
//if(elm.checked){

sendF = 1;
}else{
sendF = 0;
}

// dataセット
var data = "personId=" + rows[i].cells[0].innerHTML
+ "&sendF=" + sendF
+ "&memo=" + rows[i].cells[3].firstChild.value

updateRecord(data);
}
}

// 更新処理
function updateRecord(data){

// 更新Ajax処理
// 更新したIDを返す
$.ajax({
type: "POST",

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2013/10/25 10:08

いろいろ間違えていますが、そもそも HTML Form の使い方を勘違いしています

HTML Form には、フォーム内容を簡単に扱える仕組みがあるので、それを利用しない手はありません。
https://developer.mozilla.org/ja/docs/Web/API/HT …

たとえばこの様に
<form onsubmit="doActionUpdate(this);return false">
...
<input type=hidden name="personId.0" value=123>123
<input type=checkbox name="sendF.0" checked>
<input type=text name="memo.0" value=ほげ>
...
<input type=hidden name="personId.1" value=456>456
<input type=checkbox name="sendF.1">
<input type=text name="memo.1" value=ふが>
...
<input type=submit value=更新>
</form>
<script>
function doActionUpdate(form) {
var e = form.elements; // フォーム内の入力要素を name で取得
for (var i = 0; e['personId.' + i]; i++) {
var personId = e['personId.' + i].value;
var sendF = e['sendF.' + i].checked;
var memo = e['memo.' + i].value;
updateRecord(personId, sendF, memo);
}
}
</script>

この回答への補足

教えて頂いたことを参考に、なんとか出来上がりました。

いろいろありがとうございました。

補足日時：2013/10/30 16:57

この回答へのお礼

回答ありがとうございました。

なかなかJavascriptが理解できずに困っています。

Formで括ることはわかるんですが、この場合はテーブルに配置された
データを登録するので行数は可変です。２行のときもあれば10行のときもあるわけですが、
その場合、１件についてFromでくくるんでしょうか。
submitがひとつであることを考えると、可変行を含めてすべての行を含んで
Formで括ればいいわけですね。

例示して頂いた
<input type=hidden name="personId.0" value=123>123
のところの「personId.0」を「personId.+ i」みたいな感じで回せばいいのかも
しれませんね。

例示を参考にちょっと頑張ってみます。

「いろいろ間違えていますが」がとありますが、勉強のためでもありますので、
具体的に指摘して頂けるとうれしいです。

よろしくお願いします。

お礼日時：2013/10/25 13:20

No.2 回答者： Ogre7077 回答日時： 2013/10/25 15:36

誤: rows[i].cells[6].checked

可: rows[i].cells[2].firstChild.checked

誤: rows[i].getElementByTagName("sendF[]").checked
可: rows[i].getElementsByName("sendF[]").checked
正: document.getElementById('sendF[' + (i-1) + ']').checked

悪: id/name を無意味に指定している
良: スタイル/スクリプト/フォーム送信で使用するもの「だけ」指定する

悪: 入力要素の取得方法が、不必要に面倒
悪: 何のための id="sendF[' + i + ']" なのか...
良: getElementById / getElementsByName / form.elements で一発取得

この回答へのお礼

Ogre7077 さん、返信が遅くなって申し訳ありません。


間違いの部分をいろいろ教えて頂き、ありがとうございました。
なんかずいぶん無駄で間違ったことをやっているんだなぁ、
と思いました。


教えて頂いたコードを元に何とかできるようになった感じなんですが・・


今度はフォームをシリアライズして一度に複数件のデータを送った時、
PHP側でどのようにばらせばいいのかでつまづいています。

引き続きご指導下さい。

お礼日時：2013/10/29 17:14