如何在 CakePHP 4 中动态添加表单字段

Question

我有 3 个 MySQL 表：

• 成分
• 食谱
• 配料配方

在“成分食谱”中的“添加”表单中，我想使用 jquery 动态添加更多行，但我不知道在哪里可以找到有关如何执行此操作的信息。

这是我的“添加”表单：

<div class="ingredientsRecipes form content">
            <?= $this->Form->create($ingredientsRecipe) ?>
            <fieldset>
                <legend><?= __('Add Ingredients Recipe') ?></legend>
                <?= $this->Form->control('recipe_id', ['options' => $recipes]) ?>
                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th><?= __('Amount') ?></th>
                                <th><?= __('Measure') ?></th>
                                <th><?= __('Ingredient') ?></th>
                            </tr>
                        </thead>
                        <tbody>
          /** ===> here starts the tablerow, that i want dynamically add
                            <tr>
                                <td><?= $this->Form->control('amount', ['label'=>false]) ?></td>
                                <td><?= $this->Form->control('measure', ['options' => $measures, 'label'=>false]); ?></td>
                                <td><?= $this->Form->control('ingredient', ['options' => $ingredients, 'label'=>false]); ?></td>
                            </tr>
          /** ===> here end the tablerow, that i want dynamically add 
                        </tbody>
                    </table>
                </div>

            </fieldset>
            <?= $this->Form->button(__('Submit')) ?>
            <?= $this->Form->end() ?>
        </div>

有人可以发布一个指向如何执行此操作的教程的链接，或者给我一个提示，我可以在哪里找到有关此的更多信息？

提前致谢

Answer 1

我终于找到了解决方案。 在“模板/页面/default.php”中我添加了

    <script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous">
</script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous">
</script>
<script
  src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore-min.js">
</script>

然后我改变了我的“add.php”如下

<div class="row">
    <aside class="column">
        <div class="side-nav">
            <h4 class="heading"><?= __('Actions') ?></h4>
            <?= $this->Html->link(__('List Ingredients Recipes'), ['action' => 'index'], ['class' => 'side-nav-item']) ?>
        </div>
    </aside>
    <div class="column-responsive column-80">
        <div class="ingredientsRecipes form content">
          <?php
            $key = isset($key) ? $key : '{{ key }}';
           ?>
            <?= $this->Form->create($ingredientsRecipe) ?>
            <fieldset>
                <legend><?= __('Add Ingredients Recipe1') ?></legend>
                <?php
                    /*
                    the origin form from "bake"
                    echo $this->Form->control('IngredientsRecipes.0.amount');
                    echo $this->Form->control('IngredientsRecipes.0.measure_id', ['options' => $measures, 'empty' => true]);
                    echo $this->Form->control('IngredientsRecipes.0.ingredient_id', ['options' => $ingredients]);
                    echo $this->Form->control('IngredientsRecipes.0.recipe_id', ['options' => $recipes]);

                    */
                    echo $this->Form->control('IngredientsRecipes.recipe_id', ['options' => $recipes]);

                ?>
              </fieldset>
              <fieldset>
                <table border ="5" id ="ingredient-table">
                  <thead>
                      <tr>
                        <th>Key</th>
                        <th>Amount</th>
                        <th>Measure</th>
                        <th>Ingredient</th>
                        <th>1</th>
                        <th>2</th>
                      </tr>
                    </thead>
                    <tbody>

                    </tbody>

                    <tfoot>
                      <tr>
                          <td colspan="5"></td>
                          <td class="actions">
                              <a href="#" class="add">add</a>
                          </td>
                      </tr>
                    </tfoot>


                  </table>
            </fieldset>

            <script id="ingredient-template" type="text/x-underscore-template">
                <?php echo $this->element('ingredientsrecipes'); ?>
            </script>

            <?= $this->Form->button(__('Submit')) ?>
            <?= $this->Form->end() ?>
        </div>
    </div>
</div>

<script>
$(document).ready(function()
{
  _.templateSettings= {
    interpolate: /\{\{(.+?)\}\}/g
  }
    var
      ingredientTable = $('#ingredient-table'),
      ingredientBody = ingredientTable.find('tbody'),
      numberRows = ingredientTable.find('tbody > tr').length,
      ingredientTemplate = _.template($('#ingredient-template').remove().text());

    ingredientTable
      .on('click', 'a.add', function(e) {
          e.preventDefault();
          $(ingredientTemplate({key: numberRows++}))
            .hide()
            .appendTo(ingredientBody)
            .fadeIn('fast');
      })

      .on('click', 'a.remove', function(e) {
          e.preventDefault();

          $(this)
            .closest('tr')
            .fadeOut('fast', function() {
                $(this).remove();
            });
      });

      if (numberRows === 0) {
          ingredientTable.find('a.add').click();
      }
});

</script>

并创建了“templates/element/ingredientsrecipes.php”

<<?php
//$key = isset($key) ? $key : '<%= key %>';
$key = isset($key) ? $key : '{{ key }}';
?>

<tr>
    <td>
      <?php echo $key; ?>
    </td>
    <td>
      <?php
            echo $this->Form->control('IngredientsRecipes.'.$key.'.amount',['label'=>false]);
          ?>
      </td>
      <td>
        <?php
          echo $this->Form->control('IngredientsRecipes.'.$key.'.measure_id', ['options'=>$measures,'label'=> false]);
        ?>
      </td>

      <td>
        <?php
            echo $this->Form->control('IngredientsRecipes.'.$key.'.ingredient_id',['options'=>$ingredients,'label'=> false]);
          ?>
      </td>

    <td class="actions">
        <a href="#" class="add">ADD+</a>
    </td>
    <td class="actions">
        <a href="#" class="remove">rem</a>
    </td>
<tr>