html – Jquery – DynaForm Enumeration

Question:

Hello how are you? I have a form with text type fields that can be added and deleted as the user likes. My question is the following: when the user finishes filling out the form I won't know how many fields there will be in the form, as new fields may have been added as well as the deletion. However, when submitting this form I need to number the fields in numerical order from 1 to the number of fields, because I will use this order later. Here's my Jquery and my logic:

var v = 1;
    $('.conteudoA').each(function () {
        $('input').prop("name", "A-" + v);
        v++;
    });

This Jquery is executed in the form submit (where I will already have the entire form finished). Each field has the class .conteudoA and in submit I change the value of the attribute name according to the value v which changes according to the iteration of the .each() . It turns out that at the end of the iteration the fields are all getting the same name value according to the number of fields there are. If there are 3 fields:

name='A-3'
name='A-3'
name='A-3'

And I need you to stay:

name='A-1'
name='A-2'
name='A-3'

Am I using .each() wrong way or my logic doesn't make sense? Can someone help me please? Appreciate!

EDIT: To add the fields use an 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');
    });

And to remove:

$('#formA').on('click', '.btnRemoveOpcaoA', function () {
        $(this).parents('.conteudoA').remove();
    });

Answer:

The function mostraName serves to check the names of inputs and of course it shouldn't be part of your code. So remove this function and the referred call in the inputs.

To check the input names click on them.

Test São Thomé – after creating some inputs, check the names, remove some inputs and check the names, and finally click on REORDENE OS NAMES and check again!

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">
Scroll to Top