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

问题描述

我有3个MysqL表：

• 成分
• 食谱
• 成分配方

在“ ingredientsrecipes”的“添加”表单中，我想用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>

有人可以发布有关如何执行此操作的教程的链接，或者提示我可以在其中找到更多信息吗？

预先感谢

解决方法

最后我找到了解决方案。 在我添加的“ template / pages / 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/[email protected]/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>