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>

一切正常，但名称和id数组不起作用。我希望名称像productId1，productId2，productId3等。同样，我希望名称像price1，price2等。佣金和名称也是如此。

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

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

Answer 1

需要遵循两个步骤： 1）您只需要保持计数器处于隐藏的输入类型，并在每次单击时将其递增即可。并为特定的Div指定ID。

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

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

1 个答案: