Mirror inputs with their values

Navigation
0

Is it possible for jquery to understand the elements of an array value coming from the html? ps: I do not know if it is correct to say that in html there is an array.

I am creating with html and jquery a dynamic input that is having the value of name as if it were an array, adding 1 for each insertion;

name="nome=[]", name="nome=[1]", name="nome=[2]"...

This is to make it easier for PHP to select the data.

These created inputs are mirrored in another <fieldset> .

I want to mirror the values by calling the element by name I got this using .keyup() of jquery, but it works only for the first input, which in theory would be nome[] .

FromthisIimagined,Itriedtocreateafortocalleachelementofthearray.Bytheway,thewayIthoughttheselectoronlystaysinnome[].

IputitintomyheadtomakeitlooklikeImightnotbeseeingotherwaystosortitout.Itriedtbmwith.clickonabutton,wherethevaluesoftheinputsofthefirst<fieldset>copiedinthevaluesoftheinputsoftheother<fieldset>,Ithoughtbecausetheybothhadthesamename.

Whatwouldbeindicated?

StudyCode-Edit#1

IntheJavaScriptparttwowaysarecommented,onesuggestedby@MatheusCubaandawayIdidbytaking#ID,butIwouldliketousethetagname

link

    
asked by anonymous 30.01.2018 / 19:59

2 answers

1

Your problem seems to be delegation . When using $("seletor").keyup , dynamically added elements are not included in the event.

To solve, use: 

$(document).on('keyup','input[name^="nome"]', function() {

In this way, the new elements will be heard by the event: 

/*-- Essa é a maneira sugerida por @Matheus Cuba ---*/
var soma = 0;

$(document).on('keyup','input[name^="nome"]', function() {
  var identificador = $(this).attr('name');
  var valor = $(this).val();
  $('input[name^="' + identificador + '"]').val(valor);
});

$('#botao').click(function(){
      soma++;
      
      $('<input id="clone'+soma+'" class="f" name="nome=['+soma+']">').appendTo('.box0');
      $('<input id="clonec'+soma+'" class="f" name="nome=['+soma+']">').appendTo('.box');
      
      });

$('#x').click(function(){
  if ( soma > 0 ){
    $('.f:last-of-type').remove();
    
    --soma;
}
    });

contador = function(){
    alert(soma);
}
div {

display: flex;

}

p {

width: 100%;
margin:0 0;
color:grey;

}

#x {

color: lightblue; 

}

#botao {

color:coral;}

#x, #botao {

text-align: center;
font-size: 3em;

}

#botao:hover, #x:hover {

cursor: pointer;

}

h1:hover{

cursor: pointer;

}

.box0, .box {

margin: auto;
color:grey;

}

fieldset {

text-align: center;
width:15em;
border: none;

}

input {

text-align: center;
margin-top: 15px;

}

.cont { 

display: flex;
justify-content: space-around;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><pid="botao">+</p><p id="soma" onclick="contador()">ALERT DA SOMA</p><p id="x">-</p></div>


<div class="cont">

 <fieldset class="box0"><input name="nome=[]" placeholder="nome" id="clone0"></fieldset>
   
     
 <fieldset class="box"><input name="nome=[]" placeholder="espelho" id="clonec0"></fieldset>
        
</div>
    
31.01.2018 / 02:32
1

Try this Snippet:

So you put a global trigger on elements whose name attribute starts with nome ( Marvelous Pun) 

$('input[name^="nome"]').keyup(function() {
  var identificador = $(this).attr('name');
  var valor = $(this).val();
  $('input[name="' + identificador + '"]').val(valor);
});
hr {
  margin: 10px 0;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Campo2:<inputname="nome=[2]"><br> Campo 2:<input name="nome=[2]"><br> Campo 2:<input name="nome=[2]"><br>
<hr> Campo 4:<input name="nome=[4]"><br>
<hr> Campo 3:<input name="nome=[3]"><br> Campo 3:<input name="nome=[3]"><br> Campo 3:<input name="nome=[3]"><br>
    
30.01.2018 / 20:18
Logging In Dynamically chrome notification does not appear