Olá, tudo bem? Eu tenho um formulário com campos tipo text que podem ser adicionados e excluídos conforme gosto do usuário. A minha questão é a seguinte: quando o usuário termina de preencher o formulário eu não vou saber quantos campos existirão no formulário, já que pode ter havido adição de novos campos bem como a exclusão. Porém, ao enviar este formulário eu preciso numerar os campos em ordem numérica de 1 até o número de campos, porque vou usar esta ordem adiante. Eis o meu Jquery e a minha lógica:
var v = 1;
$('.conteudoA').each(function () {
$('input').prop("name", "A-" + v);
v++;
});
Este Jquery é executado no submit do fomulário (onde já terei todo o formulário finalizado). Cada campo possui a classe .conteudoA
e no submit mudo o valor do atributo name
conforme o valor v
que muda de acordo com a iteração do .each()
.
Acontece que ao final da iteração os campos estão ficando todos com o mesmo valor de name
de acordo com o número de campos que existem. Se existirem 3 campos:
name='A-3'
name='A-3'
name='A-3'
E preciso que fique:
name='A-1'
name='A-2'
name='A-3'
Estou usando o .each()
de forma errada ou minha lógica não faz sentido? Alguém pode me ajudar por favor?
Agradeço!
EDIT: Para adicionar os campos uso um append
$("#btnAddOpcaoA").click(function () {
$("<div class='row conteudoA'><div class='col-md-10'><input name='' type='text' class='form-control' opcao='A' ordem='' id='' placeholder=''/></div><div class='col-md-2'><button style='margin-top: 5px;' type='button' class='btnRemoveOpcaoA btn btn-danger btn-xs'><span class='glyphicon glyphicon-minus'></span></button></div></div>").appendTo('#formA');
});
E pare remover:
$('#formA').on('click', '.btnRemoveOpcaoA', function () {
$(this).parents('.conteudoA').remove();
});
name='A-1'
na segunda iteraçãoname='A-2'
e finalmente na terceiraname='A-3'
. Isso porque todos tem a mesma classe.