Question

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

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

然后将它们以类似于下面的方式放入数组中：

<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块？

Answer 1

您可以动态找到最高x，请参阅评论：

＆＃13;

$("#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]">');
});

＆＃13;

<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>

＆＃13;

使用JavaScript添加动态表单字段

1 个答案: