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 get the amount of inputs inside div
that is in var wrapper
and will add 1 more, since you already have an input inside 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><divclass="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>
So there's a detail, it's not a problem, it's up to you. In this case you delete the input
of number 5. The others will continue with their names. So if you want to always have the same order, you can do it as follows:
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 by clicking Add and Removing:
$(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><divclass="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>
UpDate:
The dynamically created inputs gave a class="textAdded"
, and now var length
does not count all the inputs, but only those 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: link