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

Posted 2023-05-08

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

【英文标题】：Dynamically add/remove forms groups and give unique id and names for each inputs

【发布时间】：2019-07-03 09:32:54

【问题描述】：

我正在研究一种复杂的 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 和名称与前一个相同。我想要一个数组来代替那些方括号[]

【参考方案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

【讨论】：

能否请您通过第二个代码部分详细说明。

jsfiddle.net/spbf15mk/3你可以点这个链接，但是需要改so逻辑。

感谢您的回答。但它没有按预期工作。我希望新添加的输入具有 name="product1" name="product2" ... 等属性。 id 属性的情况类似。我希望新的 id 是 id="someid1" id="someid2" .. etc.