昨日、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ベストアンサー
- 回答日時:
いろいろ間違えていますが、そもそも 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>
回答ありがとうございました。
なかなかJavascriptが理解できずに困っています。
Formで括ることはわかるんですが、この場合はテーブルに配置された
データを登録するので行数は可変です。2行のときもあれば10行のときもあるわけですが、
その場合、1件についてFromでくくるんでしょうか。
submitがひとつであることを考えると、可変行を含めてすべての行を含んで
Formで括ればいいわけですね。
例示して頂いた
<input type=hidden name="personId.0" value=123>123
のところの「personId.0」を「personId.+ i」みたいな感じで回せばいいのかも
しれませんね。
例示を参考にちょっと頑張ってみます。
「いろいろ間違えていますが」がとありますが、勉強のためでもありますので、
具体的に指摘して頂けるとうれしいです。
よろしくお願いします。
No.2
- 回答日時:
誤: 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側でどのようにばらせばいいのかでつまづいています。
引き続きご指導下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスの値を変数に ...
-
チェックボックスのON/OFFでVal...
-
チェックボックスの設定
-
value内に変数を入れたい
-
onclickで2個指定するには?
-
return trueとreturn falseの用...
-
COBOLの数字チェック
-
JavaScriptでテーブルの行入れ替え
-
submitした値を返したい
-
チェックボックスにチェックが...
-
プルダウン 項目が多いので先頭...
-
フォーム内で記入したクエリ送...
-
ラジオボタンでクリックした値...
-
Selectボックスの幅を自動で広...
-
ボタン2回押しを無効にしたい
-
POST時に要素を削除してからPOST
-
Selectボックスの一覧表示方法
-
ラジオボタンの選択に応じてプ...
-
2段階プルダウンで1段階目の選...
-
二つの入力欄に、同時に同じ文...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
チェックボックスのON/OFFに応...
-
【jsp/Java】チェックボックス...
-
checkboxをクリックしてリロー...
-
チェックボックスで指定したも...
-
確認ページからフォームページ...
-
チェックボックスの設定
-
javascriptで確認ダイアログの...
-
フォームのチェックボックスの...
-
複数式のチェックボックス
-
背景色を変えて未入力チェック...
-
JQuery Mobileでチェックボック...
-
JSP内で可変するチェックボック...
-
チェックボックスが1つ以上チェ...
-
複数のチェックボックス項目が...
-
一方のチェックボックスのON/OF...
-
documentオブジェクトのlength...
-
チェックボックスの使い方
-
チェックボックスの無効化、有効化
-
Firefoxでテキストボックスから...
おすすめ情報