フォーム中に下の図のように、新規に要素を追加していきたいような画面を作りたいときは、
まず以下のCDNをロードし、
<!-- repeater用 --> <?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js");?> <?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js");?>
Template/Shoppings/add.ctpに
<div class="repeater"> <div data-repeater-list="group-a"> <div data-repeater-item> <?=$this->Form->control('name',['placeholder' => __("購入する商品を入力"), 'label'=> '買い物リスト']); </div> <button data-repeater-delete type="button"></button> </div> <input data-repeater-create type="button" value="品目を追加"/> </div> <script> $(document).ready(function(){ $('.repeater').repeater({ initEmpty: false, isFirstItemUndeletable: false }); }); </script>
このような感じにしてやって、あとはcssをうまく調整してやるといいです。