JQuery Obter ID dinâmico usando JQuery

[Visitante]

Como posso obter pelo JQuery no evento Click do botão o ID gerado dinamicamente para os Inputs?

 

<?php
for($a=0; $a < $info.length; $a++){
echo "<input type='text' id='op{$a}' value='{$info}'>";
echo "<input type='button' id='btn{$a}' value='Enviar'>";  
}
?>  

Saída:

<input type='text' id='op1' value='dado1'>
<input type='button' id='btn1' value='Enviar'>

<input type='text' id='op2' value='dado2'>
<input type='button' id='btn2' value='Enviar'>

....até que $a atinja a condição...

btn1 = pega o ID de op1

btn2 = pega o ID do op2

...etc...

[washalbano]

Olá!
Você pode usar no input:button uma propriedade do tipo data-*, com valor igual a id do input:text veja:
 

<input type='text' id='op1' value='dado1'>
<input type='button' id='btn1' data-input='op1' value='Enviar'>

Use assim, no jquery:
 

$('input[type="button"]').click(function(){

alert($('input#'+$(this).data('input')).val());

});

Mas se forem elementos imediatamente adjacentes, não precisa do atributo data-*
Pode ser feito assim:

$('input[type="button"]').click(function(){

alert($(this).prev().val());

});

 

[DiF]

@fspjonny

Ou você pode adicionar um elemento div para separar, e usar o each()  e siblings().

 

Por exemplo: Gere isto:

<div class="inputs">
<input type='text' class="text" name='dado' id='op1' value='dado1'/>
<input type='button' class="inputClass" id='btn1'  value='Enviar'/>
</div>

<div class="inputs">
  <input type='text' class="text" name='dado2' id='op2' value='dado2'/>
<input type='button' class="inputClass" id='btn2' value='Enviar'/>
</div>

 $('.inputs input.inputClass').each(function() {
      $(this).on('click',function(){    
          var id = $(this).attr('id');
          var value = $(this).siblings('input').val();
 
          alert("Botão: "+id + " clicado.  Dado a ser enviado: "+ value);
          
      });
   });

Veja um exemplo online com vários inputs gerado do laço de for: http://jsfiddle.net/dife/1y09hjav/34/

 

De qualquer forma, usar os data attributes podem facilitar muito a sua vida! A dica do colega acima é muito boa. 

 

Tente as duas formas e veja a que fica melhor no seu projeto! 

 

PS: No meu exemplo, eu já incluí o valor do campo input emcima do botão!

 

[Visitante]

11 horas atrás, washalbano disse:

Olá!
Você pode usar no input:button uma propriedade do tipo data-*, com valor igual a id do input:text veja:
 

<input type='text' id='op1' value='dado1'>
<input type='button' id='btn1' data-input='op1' value='Enviar'>

Use assim, no jquery:
 

$('input[type="button"]').click(function(){

alert($('input#'+$(this).data('input')).val());

});

Mas se forem elementos imediatamente adjacentes, não precisa do atributo data-*
Pode ser feito assim:

$('input[type="button"]').click(function(){

alert($(this).prev().val());

});

 

Perfeito!

adicionado 2 minutos depois

11 horas atrás, DiF disse:

@fspjonny

Ou você pode adicionar um elemento div para separar, e usar o each()  e siblings().

 

Por exemplo: Gere isto:

<div class="inputs">
<input type='text' class="text" name='dado' id='op1' value='dado1'/>
<input type='button' class="inputClass" id='btn1'  value='Enviar'/>
</div>

<div class="inputs">
  <input type='text' class="text" name='dado2' id='op2' value='dado2'/>
<input type='button' class="inputClass" id='btn2' value='Enviar'/>
</div>

 $('.inputs input.inputClass').each(function() {
      $(this).on('click',function(){    
          var id = $(this).attr('id');
          var value = $(this).siblings('input').val();
 
          alert("Botão: "+id + " clicado.  Dado a ser enviado: "+ value);
          
      });
   });

Veja um exemplo online com vários inputs gerado do laço de for: http://jsfiddle.net/dife/1y09hjav/34/

 

De qualquer forma, usar os data attributes podem facilitar muito a sua vida! A dica do colega acima é muito boa. 

 

Tente as duas formas e veja a que fica melhor no seu projeto! 

 

PS: No meu exemplo, eu já incluí o valor do campo input emcima do botão!

 

Funciona perfeito também,  Obrigado!!!