使用 JavaScript 添加动态表单字段答案

【问题标题】：Adding dynamic form fields with JavaScript使用 JavaScript 添加动态表单字段
【发布时间】：2017-11-27 11:39:48
【问题描述】：

我有一个用于创建 JSON 数组的表单，请参阅 my previous question 以供参考。

在此表单中，用户可以通过单击按钮并填写所述额外详细信息来向表单添加其他详细信息。

然后，它们会以与下面类似的方式放入一个数组中：

<input type="text" name="AdditionalCitizenship[0][CountryOfResidency]">
<input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]">
<input type="text" name="AdditionalCitizenship[1][CountryOfResidency]">
<input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]">

这将允许我通过增加数组索引来获取用户输入的尽可能多的详细信息。

我收到了这个脚本来添加额外的表单字段。

 $(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap_tel"); //Fields wrapper
var add_button      = $(".add_field_button_tel"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><div class="row"><div class="form-group col-md-4"><label for="AdditionalTelephoneType">Telephone Type</label><input type="text" class="form-control" name="AdditionalTelephoneType[]" ></div><div class="form-group col-md-4"><label for="AdditionalTelephoneDialingCode">Dialing Code</label><input type="text" class="form-control" name="AdditionalTelephoneDialingCode[]"></div><div class="form-group col-md-4"><label for="AdditionalTelephoneNumber">Telephone Number</label><input type="text" class="form-control" name="AdditionalTelephoneNumber[]" ></div></div><a href="#" class="remove_field">Remove</a></div>'); //add input box


    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

我正在尝试按原样使用，但在这种情况下，很难在创建的 HTML 中增加 x，因为它似乎会破坏函数。

我可以像这样更迭代地创建 HTML：

首先，创建 DIV 结构作为包装器，如下所示：

var html = "<div></div>"

然后将输入附加到这个名为input的变量

var input = document.createElement("input");
input.type = "text";
input.name = "AdditionalTelephoneType[" + x"]";

...然后使用 wrapper.append 和我之前创建的变量插入整个 HTML 块？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

可以动态找到最高的x，见cmets：

$("#add").on("click", function() {
  // Get the containing form
  var form = $(this).closest("form");
  // Get all the AdditionalCitizenship fields from it using ^=, see
  // https://www.w3.org/TR/css3-selectors/#attribute-substrings
  var fields = form.find("input[name^=AdditionalCitizenship]");
  // Find the one with the highest [x]
  var x = fields.get().reduce((x, element) => {
    var thisx = element.name.match(/AdditionalCitizenship\[(\d+)\]/);
    if (thisx) {
      thisx = +thisx[1]; // The capture group, convert to number
      if (x < thisx) {
        x = thisx;
      }
    }
    return x;
  }, 0);
  // Add one
  ++x;
  // Use x
  console.log("Next x is " + x);
  form.append('<input type="text" name="AdditionalCitizenship[' + x + '][CountryOfResidency]">');
  form.append('<input type="text" name="AdditionalCitizenship[' + x + '][TaxIdentificationNumber]">');
});

<form>
  <input type="text" name="AdditionalCitizenship[0][CountryOfResidency]">
  <input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]">
  <input type="text" name="AdditionalCitizenship[1][CountryOfResidency]">
  <input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]">
<input type="button" id="add" value="Add">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：