动态添加/删除表单组并为每个输入提供唯一的 ID 和名称

Question

我正在研究一种复杂的 CMS。基本上我想要的是在单击一个按钮时创建更多的表单输入，甚至通过另一个按钮将它们删除。该脚本已经在运行，但每个输入都具有相同的名称。我想编写一个 php 脚本来提交数据库中的数据。所以我希望它们都有唯一的名称和 ID。

我有以下 JS/jQuery/HTML：

$(document).ready(function() {
  //group add limit
  var maxGroup = 7;
  //add more fields group
  $(".addMore").click(function() {
    if ($('body').find('.fieldGroup').length < maxGroup) {
      var fieldHTML = '<div class="row fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
      $('body').find('.fieldGroup:last').after(fieldHTML);
    } else {
      alert('Maximum ' + maxGroup + ' groups are allowed.');
    }
  });

  //remove fields group
  $("body").on("click", ".remove", function() {
    $(this).parents(".fieldGroup").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="row fieldGroup">
    <div class="col-md-3">
      <div class="form-group">
        <label for="productId">ID :</label>
        <input type="text" name="productId[]" class="form-control" id="productId[]"> </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label for="productName">Name :</label>
        <input type="text" name="productId[]" class="form-control" id="productName[]">
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="price">Price :</label>
        <input type="number" name="price[]" id="price[]" class="form-control">
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="commission">Commission :</label>
        <input type="number" name="commission[]" id="commission[]" class="form-control">
      </div>
    </div>
    <a href="#" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
  </div>

  <div class="row fieldGroupCopy" style="display: none;">
    <div class="col-md-3">
      <div class="form-group">
        <label for="productId">ID :</label>
        <input type="text" name="productId[]" class="form-control" id="productId[]"> </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label for="productName">Name :</label>
        <input type="text" name="productId[]" class="form-control" id="productName[]">
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="price">Price :</label>
        <input type="number" name="price[]" id="price[]" class="form-control">
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="commission">Commission :</label>
        <input type="number" name="commission[]" id="commission[]" class="form-control">
      </div>
    </div>
    <a href="#" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
  </div>
</section>

除了 name 和 id 数组不起作用之外，一切都按需要工作。 我希望名称类似于 productId1、productId2、productId3 等。 同样，我希望名称类似于 price1、price2 等。 佣金和姓名也是如此。

我希望输出具有唯一的 id 和名称，以便我可以轻松编写 php 脚本来提交表单。

当我单击添加按钮时，会创建一个新的表单组，但它的 id 和名称与前一个相同。我想要一个数组来代替那些方括号[]

Answer 1

需要遵循两个步骤： 1）您只需将输入类型的计数器保持为隐藏状态，并在每次单击时将其递增。 并将 id 分配给特定的 Div。

var cnt=0;  

$(".addMore").click(function() {
    if ($('body').find('.fieldGroup').length < maxGroup) {
      var fieldHTML = '<div class="row fieldGroup" id="dynamicfrom+ cnt>' + $(".fieldGroupCopy").html() + '</div>';
      $('body').find('.fieldGroup:last').after(fieldHTML);
     cnt++;
    } else {
      alert('Maximum ' + maxGroup + ' groups are allowed.');
    }
  });

2) 添加新表单组后，循环遍历表单的所有输入并通过计数器 id 更改其名称。

$('#divformgroup(Counter) input').each(function () {
  //Here change name of input.
$('input').attr('name', 'yourNewname');
});

您可以点击以下链接： enter link description here enter link description here