【CakePHP3】formにjQueryで送信するhidden要素を追加して送信したい

Question

はじめに

CakePHP初心者です。
業務で使い始めました。

やりたいこと

CakePHP3.5.0でPOST通信するフォームに、
submitイベントをjQueryで拾ったときに、hidden要素を追加して送りたい。

---

流れ

(1)ユーザがページにアクセス。Form外のDOMを操作
(2)ユーザがフォームの送信ボタンを押下
(3)jQueryのon('submit', function)が formのサブミットを検知
(4)jQueryでDOMの必要な部分を取得
(5)フォームの送信データに(4)で取得したものをくっつけて送信

やったこと

とりあえずformを用意。

<?= $this->Form->create(null, ['type' => 'post', 'url' => ['controller' => 'controller名', 'action' => 'メソッド名']]); ?>
<button type="submit" class="button" id="output">送信</button>
<input type="hidden" name="id" value="<?= $id ?>">
<?= $this->Form->end(); ?>

---

submit検知用JS

$('form').on('submit', function () {
    // 取得
    let lines = $('table > tbody').find('tr');
    let form = $(this).parent().find('form')[0];

    // ユーザがいじったものをformに
    $(lines).each(function (key, element) {
        // 各行のテキストを取得
        let name = $(element).find('.name').text();
        let value = $(element).find('.value').text();

        // フォームを擬似的に作成
        $(form).append('<input type="hidden" name="' + name + '" value="' + value + '">');
    });

    $(form).submit();

});

---

アクセスした先のコントローラー

// データをすべて取得
$data = $this->request->getData();

debug($data);
die;

---

上記コードで、403が帰ってくる。
ちなみに、アドレスに直接アクセスする（GETアクセスする）と、正常にページが表示されます。
原因はわかりません。。。

---

やり方をご存じの方がいらっしゃいましたら、
ご教示いただけますと幸いです。
よろしくお願いいたします。

参考

https://qiita.com/mkn_ppr/items/8c47cefb1934045481ff
https://www.sejuku.net/blog/31050
https://blog.s-giken.net/306.html
http://raining.bear-life.com/jquery/jquery%E3%81%A7submit%EF%BC%88%E3%82%B5%E3%83%96%E3%83%9F%E3%83%83%E3%83%88%EF%BC%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

Comments

[退会済みユーザー]

Csrf モジュールをアンロードしたらどうなります？

Answer 1

csrf ajax の話に見えるけど
post 403
get 200
なので

Comments

[nnahito]

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

miyabi-sun様も、考えていただき本当にありがとうございました！

Answer 2

ん〜、PHPの仕様でPOST値を配列で受け取りたい時はname属性をhoge[]のように[]の指定をしましょう。
これが全部の原因かどうか分かりませんが、ひとまずはそれで対応してみてください。

また、HTML5ならformのお外だからといってわざわざjQueryで全ての値を取得する必要はありません。
下記のようにform属性にformのid値と同じモノを指定して上げれば、
そのformに属しているように動作します。

<form id="hoge" method="post" action="./">
</form>
<input form="hoge" name="piko" type="text" value="123" />

Comments

[退会済みユーザー]

csrf ajax の話に見えるけど
post 403
get 200

[miyabi-sun]

CSRFは初耳でした、ありがとうございます。
たしかに403の主原因のように思えますね。
https://qiita.com/mpyw/items/8f8989f8575159ce95fc
https://book.cakephp.org/3.0/ja/controllers/middleware.html#csrf-middleware

[nnahito]

ご回答ありがとうございます！
csrf問題でした……
Laravelだと、CSRDのIDだけ投げればいいのに、Cakeだと要素まできっちり見てるんですね……
勉強になりました。

ありがとうございます。
（asahina1979様はぜひ回答欄に書いていただけると嬉しいです……ベストアンサー押せないｗ）