動的に追加したフォームに入力されたデータがPostされない

Question

CakePHP ver2.7.5にて、編集画面に「フォームを動的に追加して一括保存する機能」を追加したいと考えています。

そこで動的にフォームを追加するスクリプトを組み、フォームの生成も動作しました。しかし、Controllerに引き渡されている配列を確認すると、動的に追加したフォームのデータが配列に格納されていませんでした。

原因につきまして、ご教示のほどお願い致します。

(画面イメージ)

カラム1 | カラム2 | 削除ボタン
データ | データ ｜ [削除] ・・・DBから取得
データ | データ ｜ [削除] ・・・同上
データ | データ ｜ [削除] ・・・同上

---

[追加ボタン] ・・・最終行にフォームを追加

[保存ボタン] ・・・データをPostする(データの更新、新規作成処理)

(受け渡される配列のイメージ)

※Controllerでdebug($this->request->data)した結果
※(int)12 ~ 14は元々DBに格納されていたデータです。

array(

'TestDetail' => array(
	(int) 12 => array(
		'id' => '12',
		'title' => 'test1-1',
		'content' => ''
	),
	(int) 13 => array(
		'id' => '13',
		'title' => 'test1-2',
		'content' => ''
	),
	(int) 14 => array(
		'id' => '14',
		'title' => 'test1-3',
		'content' => ''
	),
                new1 => array(
		'id' => '14',
		'title' => 'test1-3',
		'content' => ''
	),

(実際に受け渡される配列のイメージ)

array(

'TestDetail' => array(
	(int) 12 => array(
		'id' => '12',
		'title' => 'test1-1',
		'content' => ''
	),
	(int) 13 => array(
		'id' => '13',
		'title' => 'test1-2',
		'content' => ''
	),
	(int) 14 => array(
		'id' => '14',
		'title' => 'test1-3',
		'content' => ''
	)
)

・view(中略)

<tbody>
   <?php  foreach ($datas as $data): ?>
   <tr>
     <?php
        $id = intval($data['TestDetail']['id']);
     $target_id = "data[TestDetail][".$id."]";
     ?>
<td class="col-xs-3">
  <input type="hidden" <?php  echo 'name='.$target_id.'[id] value='.$data['TestDetail']['id'] ?> >
  <input type="text" <?php  echo 'name='.$target_id.'[title] value='.$data['TestDetail']['title'] ?>>
</td>
<td class="col-xs-7" style="text-align:left">
 <input type="text" <?php  echo 'name='.$target_id.'[content] value='.$data['TestDetail']['content'] ?>>
</td>
<td class="col-xs-2">
  <button class="btn btn-default" type="button">
     削除
  </button>
</td>
</tr>
<?php endforeach;?>
</tbody>
                 
</table>
<!--行追加ボタン-->
  <button class="btn btn-primary" type="button" id="rowAdd">追加</button>

・行追加ボタンのスクリプト

<script>
$(document).ready ( function() {
		var index = 0;
		
		$('#rowAdd').click(function() {
			index ++;
			var $newTitle = "<td class='col-xs-3'><input type='text' name='data[TestDetail][newData"+index+"][title]'></td>";
			var $newContent = "<td class='col-xs-7'><input type='text' name='data[TestDetail][newData"+index+"][content]'></td>";
			var $newRemove = "<td class='col-xs-2 remove'><button class='btn btn-default' type='button'>削除</button></td>";
			var $newRow = "<tr>"+$newTitle+$newContent+$newRemove+"</tr>";
			
			// 最後の行に追加
        	$('#target').append($newRow);
			$('#target tr:last').hide().fadeIn(500);
		});
	});

	/* 追加した行を削除 */
	$(document).on('click','.remove',function () {
        $(this).parent().fadeOut('slow',function(){$(this).remove();});
	});
</script>

Answer 1

入力ミスかもしれませんが、viewの6行目

$target_id = "data[TestDetail][".$id."]";

dataではなく、$dataでは？

Comments

[shi_ue]

横槍すみません。

いやいや、dataであってますよ。これはnameアトリビュートをCakePHPの認識する名前にしようとしようとしているだけです。

[KensukeNoda]

ご指摘ありがとうございます。
shi_ueさんのおっしゃる通り、$target_idはnameで使っているもので、ご指摘の箇所は正常に動作しております。とはいえ、変数名が抽象的で可読性が低いので、見直した方が良さそうですね。

Answer 2

色々検証してみました。
この配列的な書き方は、別段CakePHPの仕様じゃないんですね。勉強不足でした。
PHPはこの形でPOSTされると、配列に分解するんですね。

それで、KensukeNodaさんのスクリプトを元にローカルでテストしてみました。
しかし、ちゃんと値は受け取れるようです。

print_r($_POST)の結果です。

Array
(
    [data] => Array
        (
            [TestDetail] => Array
                (
                    [12] => Array
                        (
                            [id] => 12
                            [title] => test1-1
                            [content] => 
                        )

                    [13] => Array
                        (
                            [id] => 13
                            [title] => test1-2
                            [content] => 
                        )

                    [14] => Array
                        (
                            [id] => 14
                            [title] => test1-3
                            [content] => 
                        )

                    [newData1] => Array
                        (
                            [title] => test-4
                            [content] => t
                        )

                    [newData2] => Array
                        (
                            [title] => test-5
                            [content] => aa
                        )

                )

        )

)

ですので、見た目はformの中に要素を追加しているように見えますが、実はformの外側に要素を追加していたりして、POSTする際に実際に送れていないんじゃないでしょうか？（そこまでは提供のコードでは分かりませんでした）

ブラウザの開発ツールなどで追加した要素の位置を見てみてください。

Comments

[KensukeNoda]

検証までしていただいて、ありがとうございます。
原因はformタグの位置でした。formタグの開始位置と閉じる位置がずれていたので統一させたところ、更新・新規ともに配列が受け渡されました。

Answer 3

新しい要素を追加するときに、

var $newTitle = "<td class='col-xs-3'>"++
  "<input type='text' name='data[TestDetail][newData"+index+"][title]'>"+
  "</td>";

としていますが、これだとCakePHPでは認識できないのでは？
data[TextDetail][数値][title]とならなければならないと思います。

なので、12～14以外の数値を入れてPOSTするしかないと思いますが、それだとどれが新しく追加したデータか分からないと思いますよ。

var $newTitle = "<td class='col-xs-3'>"+
  "<input type='text' name='data[NewTestDetail]["+index+"][title]'></td>";

こんな風に別のオブジェクトを作ってしまって、CakePHP側で処理を入れた方がいいと思います。

Comments

[KensukeNoda]

ご回答いただきありがとうございます。
確かに、その方がContorollerで「更新」と「新規登録」を分岐させる上でも、オブジェクトを分けた方がスマートに処理できますね。

ただ、今のところ、オブジェクトを分けてもNewTestDetailは認識されていません。
別の箇所にもバグがありそうです。

ちなみに、[NewTestDetail]は配列の要素名というだけで、オブジェクトの宣言等は必要ない、との認識で間違いないでしょうか？

(追記・備忘)
保存した際にControllerでdebug($this->request->data['NewTestDetail'])で確認したところ、[Undefined index: NewTestDetail]のエラーが出ていました。NewTestDetailモデルを作った上で、loadModelをすれば認識するかと思いきや出来ませんでした。

(さらに追記)
更新したデータ(data[OldTestDetail])と新たに追加したデータ(data[NewTestDetail])でオブジェクトを分けてPostしてみました。
oldTestDetail → 認識される
newTestDetail → 認識されない

newTestDetailがoldTestDetailと同じ<form>タグ内の要素として認識されていない、ということかなと考えています。