Jquery - Dynamic form enumeration

Asked

Viewed 122 times

3

Hey, how you doing? I have a form with text fields that can be added and deleted as the user likes. My question is this: when the user finishes filling the form I will not know how many fields there will be in the form, since there may have been addition of new fields as well as deletion. However, when sending 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 fomulário’s Submit (where I will already have all the 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 .each() . It turns out that at the end of the iteration the fields are all getting the same value of name 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'

I’m using the .each() wrong way or my logic doesn’t make sense? Can someone please help me? Thanks!

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();
    });
html jquery form

  • Your logic goes like this: in the first iteration it’s all name='A-1' in the second iteration name='A-2' and finally in the third name='A-3'. That’s because everyone has the same class.

  • Gosh, friend, I didn’t pay attention to this detail. Thank you very much. However, there is some way to do this enumeration in the elements?

  • Gee, buddy, without the add and delete code it’s hard to work out any answers

  • I edited the post with the information

2 answers

1


The function mostraName serves to check the input numbers and of course should not be part of your code. Therefore remove this function and the referred call in the inputs.

To check out the names of inputs click on them.

Teste 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">

0

Are you using the .each incorrectly; follows modification

$('.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.

Browser other questions tagged html jquery form

You are not signed in. Login or sign up in order to post.