Jquery - Dynamic Form Enumeration

Question

Jquery - Dynamic Form Enumeration

Navigation

#1 by (0 votes)
#2 by (0 votes)

4

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 this: when the user finishes filling the form I will not know how many fields will exist on the form, since there may have been addition of new fields as well as 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 runs on the submit form (where I'll already have the entire form completed). Each field has the class .conteudoA and in the submit mute the value of the name attribute according to the value v that 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 that exist. If there are 3 fields:

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

I need you to stay:

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

Am I using .each() wrongly or does my logic not make sense? Can someone help me please? 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 stop removing:

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

html jquery

asked by anonymous 16.06.2018 / 18:02

2 answers

0

You are currently using .each incorrectly; follow modification

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

link

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.

16.06.2018 / 18:40

Find and show the way - labyrinth in C How to do a container deploy through the portal azure?

score 0 · Accepted Answer

The mostraName function is used to check input names and of course it should not be part of your code. Therefore remove this function and call in the inputs.

To check the names of the inputs click on them.

São Thomé Test - after creating some inputs, check the names, remove some inputs and check the names, and finally click on REORDENE OS NAMES and check it 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><buttonid="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">