1

É possível o jquery entender os elementos de um valor array vindo do html? ps: não sei se é correto dizer que no html tem uma array.

Estou criando com html e jquery um input dinâmico que está tendo o valor do name como se fosse uma array, somando 1 pra cada inserção ;

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

isso é para faciltar o PHP selecionar os dados.

Esses inputs criados são espelhados numa outra <fieldset>.

Quero espelhar os values chamando o elemento pelo name consegui isso usando o .keyup() do jquery, mas ele funciona só para o primeiro input, que em tese seria o nome[].

inserir a descrição da imagem aqui

A partir desse jeito que imaginei, tentei criar um for pra chamar cada elemento da "array ". Pelo jeito, da maneira que pensei o seletor só fica no nome[].

Botei na cabeça fazer desse jeito que talvez não esteja enxergando outras maneiras de resolver isso. Tentei tbm com um .click em um botão, aonde os values dos inputs do primeiro <fieldset> copiassem nos values dos inputs do outro <fieldset>, pensei isso por ambos terem o mesmo name.

O que seria indicado ?

Código estudo - Edit#1

Na parte do Java Script está comentado duas maneiras, uma sugerida pelo @Matheus Cuba e uma maneira que fiz pegando pelo #ID, mas gostaria de usar a tag name

https://jsfiddle.net/10nkpt2x/5/

2
  • Deixa eu ver se entendi, você tem vários elementos input com name="nome=[2]", quando você atualizar um deles quer todos os outros inputs com esse mesmo name sejam atualizados pra este valor? Commented 30/01/2018 às 19:09
  • Matheus, mais ou menos! Eu não sei quantos inputs vão ter pois é dinâmico, vai somando. O que eu tenho em mente é como vou ter dois elementos com o mesmo name penso que poderia copiar o valor de um em outro. Vou atualizar minha pergunta com uns "códigos estudos" sobre o caso ai vc vê melhor :)
    – Bender
    Commented 30/01/2018 às 23:22

2 Respostas 2

2

Tente este Snippet:

Assim, você coloca uma trigger global nos elementos cuja o atributo name comece com nome (Trocadilho Maravilhoso)

$('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>
Campo 2:<input name="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>

1
  • Coloquei no corpo da questão os códigos , está um esqueleto do que estou pretendendo fazer, do jeito com o #ID ele funciona bugado, pra sair o value nos outros inputs precisa escrever no ipunt primeiro, e depois , se vc clicar em alguns inputs hora ele funciona, hora não.
    – Bender
    Commented 30/01/2018 às 23:34
1

Seu problema parece ser de delegação. Ao usar $("seletor").keyup, os elementos adicionados de forma dinâmica não estão incluídos no evento.

Para solucionar, use:

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

Desta forma, os novos elementos serão escutados pelo evento:

/*-- 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><p id="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>

1
  • muito obrigado ! eu não estava enxergando a capacidade do evento on() iluminou agora :)
    – Bender
    Commented 31/01/2018 às 3:15

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 .