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:

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

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('<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--;
})
});

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 = "<div></div>"

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?

T.J. Crowder · Accepted Answer · 2017-11-27 11:50:17Z

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

Collectives™ on Stack Overflow

Adding dynamic form fields with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related