Utilizando o exemplo que passou na pergunta, basta isso adicionar a seu .append()
:
.append('<div><input type="text" name="Texto'
+(+wrapper.find("input:text").length+1)
'" /><a href="#" class="remove_field">Remove</a></div>');
No caso ele irá pegar a quantidade de inputs dentro da div
que está na var wrapper
e irá somar mais 1, já que já se possuí uma input dentro da div
. Como você pode ver nesse exemplo:
$(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>
Desse modo há um detalhe, não chega a ser um problema, vai depender de você. Nele caso você delete a input
de número 5. A outras continuarão com seus names. Então se deletou a 5, ordem agora é 1,2,3,4,6,7... Caso queira que sempre tenha a mesma ordem, você pode fazer da maneira abaixo:
Criei uma função replaceName()
:
function replaceName(){
wrapper.find("input:text").each(function(){
$(this).attr('name', "Texto"+(+$(this).index("input:text")+1)); $(this).val($(this).attr('name'))
});
}
Basta colocá-la para ser executada ao clicar em adicionar e ao remover:
$(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:
As inputs criados dinamicamente dei uma class="textAdded"
, e agora a var length
não conta todas as inputs e sim somente as com a 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>');
Veja aqui: https://jsfiddle.net/SamirChaves/a4n0v8wf/1/