Add more fields in form dynamically in Jquery

Question

I am creating a form, in which the user will add more fields dynamically. I took the function of this tutorial: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

The problem is when adding, I want each field to come with a different "Name". type: "Text 1", "Text 2", "Text 3"... how do I apply this function?

Answer 1

Using the example you passed in the question, just add this to your .append():

.append('<div><input type="text" name="Texto'
 +(+wrapper.find("input:text").length+1)
 '" /><a href="#" class="remove_field">Remove</a></div>');

In case it will take the amount of inputs inside the div who is in the var wrapper and will add up to 1, since an input is already in the div. As you can see in this example:

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

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    var length = wrapper.find("input:text").length;

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="Texto' + (length+1) + '" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
    //Fazendo com que cada uma escreva seu name
    wrapper.find("input:text").each(function() {
      $(this).val($(this).attr('name'))
    });
  });

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div>
    <input type="text" name="mytext[]">
  </div>
</div>

This way there is a detail, it is not a problem, it will depend on you. In this case you delete the input of number 5. The others will continue with their Names. Then if deleted to 5, order now is 1,2,3,4,6,7... If you want to always have the same order, you can do it the way below:

I created a function replaceName():

function replaceName(){
    wrapper.find("input:text").each(function(){
        $(this).attr('name', "Texto"+(+$(this).index("input:text")+1));                                 $(this).val($(this).attr('name'))
    });
}

Just put it to run when clicking add and remove:

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //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><input type="text" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
    //Fazendo com que cada uma escreva seu name
    replaceName();
  });

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

  function replaceName() {
    wrapper.find("input:text").each(function() {
      $(this).attr('name', "Texto" + (+$(this).index("input:text") + 1));
      $(this).val($(this).attr('name'))
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div>
    <input type="text" name="mytext[]">
  </div>
</div>

Update:

The inputs dynamically created gave a class="textAdded", and now the var length does not count all inputs, but only with the class textAdded.

var length = wrapper.find("input:text").length;

$(wrapper).append('<div><input type="text" class="textAdded" name="Texto' + (length+1) + '" /><a href="#" class="remove_field">Remove</a></div>');

See here: https://jsfiddle.net/SamirChaves/a4n0v8wf/1/

Answer 2

Why not use X to include a numeral to a name:

var nome = 'Texto'+$x
$(wrapper).append('<div><input type="text" name="$nome"/><a href="#" class="remove_field">Remove</a></div>');