Adding dynamic form fields with JavaScript

Question

I have a form that is used to create a JSON array, see my previous question for reference.

In this form a user can add additional details to the fom by clicking a button and filling in said extra details.

These would then be placed into an array in a similar fashion to the below:

This would allow me to grab as many details as the user entered by incrementing the array index.

I was handed this script to add extra form fields.

 $(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('Telephone Type
Dialing Code
Telephone Number
Remove'); //add input box


    }
});

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

I am trying to use as is but in this scenario, it is difficult to increment x within the created HTML as it seems to blow up the function.

Could I create the HTML more iteratively like so:

First, create the DIV structure as a wrapper like:

var html = "

"

Then append an input to this variable called input

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

... and then insert the whole HTML block by using wrapper.append with the variables I have created previously?

user_157247 · Answer

You can find the highest x dynamically, see comments:

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

Adding dynamic form fields with JavaScript

1 Answers