[Resolvido] passar valor para proxima tag input

Wellington09 · Junho 11, 2012

Ao digitar um valor na primeira input e tirar focu dele, ele manda este valor para a proxima input

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  jQuery(document).ready(function(){
 jQuery('.campo').blur(function(){
	 pega_valor = parseInt(jQuery(this).val());
	jQuery(this).next('input').val(pega_valor);
 });
  });
</script>
</head>

<body>

<form action="#" name="teste" method="post">
 <input class="campo" name="campoa" type="text" value="">
 <input name="campob" type="text" value="">
</form>

</body>
</html>

porem se eu colocar uma outra tag no meio das inputs , a função não vai funcionar mais

<input class="campo" type="text" name="vlrdocumento" value="">
<p>
 <input type="text" name="vlrsaldo" value="">
</p>

Bruno Augusto · Junho 11, 2012

Mas é claro que não vai funcionar.

jQuery.next() retorno o nó localizado imediatamente após ao nó do seletor encontrado, o que não é nada útil na elaboração de formulários semanticamente corretos.

Mas para felicidade geral da nação, jQuery.next() aceita um outro seletor como argumento.

Nesse seu caso bastaRIA adicionar um input dentro de jQuery.next() que funcionarIA.

O grande problema na minha opinião é que o jQuery.next() ou é meio burro ou meio limitado demais.

jQuery( this ).next( 'input' );

Na minha opinião essa instrução deveria "pular" o <p> e pegar a primeira tag <input> após o seletor atual (.campo). Mas não, temos um undefined porque não existe nenhum <input> DEPOIS do .campo.

Só que se você pendurar outro jQuery.next():

jQuery( this ).next().next()

Esperando cair no <input> terá a decepção de receber o mesmo undefined, pelo mesmo motivo acima, só que agora valendo para qualquer nó.

A solução seria encontrar o elemento e para isso pode-se usar jQuery.find() a partir de jQuery.next():

jQuery( this ).next().find( 'input' ).val()

Exemplo completo e funcionando, no JSFiddle

Eu acho que daria pra fazer sem invocar esses dois métodos, diretamente através um XPath mais elaborado. mas não consegui bolar aqui e agora. <_<

Wellington09 · Junho 12, 2012

então , mas é ai que está o problema que eu estou falando.

vou tentar explicar melhor.

seguindo o exemplo do jsfiddle que esta funcionando

se eu tiver este exemplo, não vai mais funcionar

<form action="#" name="teste" method="post">
   <input class="campo" type="text" name="vlrdocumento" value="" />
   <input type="text" name="vlrsaldo" value="" />
</form>

e se eu tiver este exemplo tb, não vai funcionar, pois eu teria que usar dois next para funcionar next().next().find('input'), como você disse logo acima

<form action="#" name="teste" method="post">
   <input class="campo" type="text" name="vlrdocumento" value="" />
   <span></span>
   <p>
     <input type="text" name="vlrsaldo" value="" />
   </p>
</form>

não sei se o jQuery tem um comando que ele entenda que eu quero a proxima tag input não importando para mim se tem 20 tag <p>, <div>, ou nenhuma delas, desde que ele entenda que eu quero a proxima tag <input>

Bruno Augusto · Junho 12, 2012

Então nesse caso, ao invés de jQuery.next(), você procura por jQuery.nextAll() em conjunto com jQuery.find()

jQuery.nextAll() vai pegar todos os nós irmãos (tradução horrorosa de sibblings) ao seletor informado.

Com um <p> como argumento, esse objeto se restringiria à todas as tags de parágrafo. Mas combinando com um jQuery.find(), o objeto seria reduzido àqueles parágrafos com uma tag <input> dentro.

Snippet Atualizado aqui

Perceba que eu "sujei" o HTML de propósito para poder ilustrar melhor.

Wellington09 · Junho 12, 2012

não conhecia este nextAll, show de bola.

certo... mas e quando eu não tiver tag alguma antes da input ?

como no exemplo que mostrei acima

<form action="#" name="teste" method="post">
   <input class="campo" type="text" name="vlrdocumento" value="" />
   <input type="text" name="vlrsaldo" value="" />
</form>

Mas no caso se eu não especificar a tag p, dentro de nextAll()

o jQuery não deveria passar direto para a tag input ? já que no caso não estou informando tag alguma antes e sim pedindo para que va para a proxima tag input

Bruno Augusto · Junho 12, 2012

Então você deve condicionar a usar jQuery.nextAll() se houver tal estrutura, senão um simples jQuery.next().

Tal condição pode ser feita através da propriedade length do objeto de um seletor.

Snippet Atualizado aqui

Agora vem cá. Pra quê tudo isso?

Conceitualmente falando você deveria padronizar as coisas. Ou é apenas <input> ou é ele dentro de um <p>

Mas se for só por aprendizado, ainda tá valendo.

Wellington09 · Junho 12, 2012

puts é verdade o length , você fica tão preocupado com as tags que você esquece de um simples if

Eu estou fazendo isso, pois pensei em algo generico para todos os forms que eu tiver entende.

vai acontecer de um form meu ter uma input depois um botão localizar e depois a input que vai receber o valor da input que foi digitada.

tem hora que a input vai pular linha com tag p e ai vai.

não interessa pra mim onde o design colocar as tags dele , desde que minha proxima input receba o valor da anterior.

mas se for o caso para deixar a ctz de que o valor sera jogado para a proxima input que eu quero é só eu criar um class para a input que vai receber o valor.

não sei se me expressei direito.

vlw mesmo pela ajuda amigo , vai diminuir bastante codigo no jquery, pois não tava afim de ficar colocando os nomes dos campos que ia receber os valores , deste jeito fica mais DRY

atualizei o codigo

o unico problema agora é se eu tiver

<input class="campo" type="text" name="vlrdocumento" value="" />
<button type="button">localizar</button>
<input type="text" name="vlrsaldo" value="" />

ou

<input class="campo" type="text" name="vlrdocumento" value="" />
<img src="imagem.jpg">
<input type="text" name="vlrsaldo" value="" />

o valor não é jogado para a proxima input

Bruno Augusto · Junho 12, 2012

Ainda assim é simples.

A partir da 5ª. Revisão, basta trocar o jQuery.next() do else por jQuery.nextAll().

Resumo da Ópera:

Ao procurar nós "irmãos", isto é, imediatamente após o nó ao qual o seletor se refere use jQuery.next()
Ao procurar nós dentro dos nós irmãos, na mesma condição acima, combine jQuery.next() com jQuery.find()
Ao procurar nós "pulando" outros que estiverem no meio, utilize jQuery.nextAll()
Ao procurar nós dentro dos nós irmãos, na mesma condição acima, combine jQuery.nextAll() com jQuery.find()

E sempre que possível experimente informar e não informar seletores para esses métodos e veja qual a combinação que resultou numa melhor performance, afinal, vai rodar no PC do cliente.

Eu nunca usei, mas já vi vários casos no Oráculo Jr. de programadores usando o JSPerf para fazer esses benchmarks.

Wellington09 · Junho 13, 2012

Não funciono não

ele só funciona com as tas assim

<input class="campo" type="text" name="vlrdocumento" value="" />
<div>texto</div>
<p>
 <input class="resultado" name="resultado" type="number" value="0.0" readonly>
</p>

assim

<input class="campo" type="text" name="vlrdocumento" value="" />
<p>
 <input class="resultado" name="resultado" type="number" value="0.0" readonly>
</p>

mas não assim

<input class="campo" type="text" name="vlrdocumento" value="" />
<input class="resultado" name="resultado" type="number" value="0.0" readonly>

atualizei o codigo do else para nextAll aqui

mas ainda estou batendo cabeça para tentar resolver o problema

Bruno Augusto · Junho 13, 2012

Eu havia dito que a partir da quinta revisão bastaria alteral jQuery.next() para jQuery.nextAll().

Quando eu escrevi isso eu testei o mesmo JavaScript com todos os HTML's ao longo desse tópico e funcionou com todos.

Observer essa quinta revisão e veja que a sua última (décima) tem algumas modificações adicionais as quais podem estar impedindo o funcionamento.

Nem sempre um seletor muito específico é a melhor saída. :thumbsup:

Wellington09 · Junho 13, 2012

é verdade

Arquivado

[Resolvido] passar valor para proxima tag input

Recommended Posts

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante