3

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();
    });
4
  • A sua lógica faz assim: na primeira iteração fica tudo name='A-1' na segunda iteração name='A-2' e finalmente na terceira name='A-3'. Isso porque todos tem a mesma classe.
    – user60252
    Commented 16/06/2018 às 16:15
  • Poxa, amigo, não me atentei neste detalhe. Muito obrigado. Porém, existe alguma forma de fazer essa enumeração nos elementos? Commented 16/06/2018 às 16:23
  • Poxa, amigo, sem o código de adicionar e excluir fica difícil trabalhar alguma resposta
    – user60252
    Commented 16/06/2018 às 18:01
  • Editei o post com as informações Commented 16/06/2018 às 19:29

2 Respostas 2

1

A função mostraName serve para conferir os names dos inputs e é claro que não deve fazer parte do seu código. Portanto retire essa função e a referida chamada nos inputs.

Para conferir os names dos inputs clique neles.

Teste São Thomé - após criar alguns inputs, confira os names, remova alguns inputs e confira os names, e por ultimo clique em REORDENE OS NAMES e confira novamente!

function mostraName(Element) {
    console.log(Element.name);
}

$(document).on('click','.Chng', function(e) {
    e.preventDefault();
    var i=1;  
    var id=""; 
    var name="";
    //itera inputs classe form-control  
    $(".form-control").each(function() {
       //pega o id do input
       id=(this.id);
       //retira o ultimo caractere no name do input com o id acima
       name = $('#'+id).attr('name').slice(0, -1);
       //reordena os names começando por 1
       $('#'+id).attr('name',name+i);
       i++
    });
});       
        

$(document).ready(function() {
   var x = 1;             
   $("#btnAddOpcaoA").click(function () {
     x++;
     /***Os name e os id dos inputs são formados concatenando um valor numérico a partir de 2 pois no HTML já existe com valor 1 *****/
     $("<div class='row conteudoA'><div class='col-md-10'><input name='A-"+ x +"' type='text' class='form-control' opcao='A' ordem='' id='meuId"+ x +"' placeholder=''  onClick='mostraName(this)'/></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>Excluir</button></div></div>").appendTo('#formA');
   });
    
   $('#formA').on('click', '.btnRemoveOpcaoA', function () {
        $(this).parents('.conteudoA').remove();
   });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnAddOpcaoA">ADD</button>  

<form id="formA"> 
   <div class='row conteudoA'><div class='col-md-10'><input name='A-1' type='text' class='form-control' opcao='A' ordem='' id='meuId1' placeholder='' value='' onClick='mostraName(this)'/></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>Excluir</button></div></div>
</form>

<input type="submit" value="REORDENE OS NAMES" class="Chng">

1
  • Obrigado!! Muito bom Commented 17/06/2018 às 16:07
0

Você está usando o .each incorretamente; segue modificação

$('.conteudoA').each(function (i, e) {
    $(e /*ou this*/).prop('name', 'A-' + (i + 1));
});

https://api.jquery.com/each/

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .