get input value hidden inside a td tag

Navigation
1

how to get value from this input inside the table with data from bd:

  

HTML CODE 

<table id="tbl_3"  class="table table-striped table-bordered table-hover">

<thead>
  <tr>

    <th style='text-align: center;' >NOME</th>
    <th style='text-align: center;' >SETOR</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>

  </tr>
</thead>

<tbody>

<?  

foreach($z as $item){ 


?>

    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="<?=$item['id']; ?>" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>

<?  }  ?>

  

JS CODE 

$('#tbl_3 tbody tr td.editar1').dblclick(function(){

          var idElemento = $('#tbl_3 tbody tr td input').val() ;  console.log(idElemento);

I want to get the ID in this input to handle an update in the DB.

    
asked by anonymous 21.02.2018 / 19:33

2 answers

1
  

Your code has a problem that many people do: put the same    id on more than one page element. Notwithstanding this, it does not   The purpose of the question is a wrong practice.

As for capturing value of input , follow the code with the correct selector: 

$('#tbl_3 tbody tr td.editar1').dblclick(function(){
   var idElemento = $(this).find("input").val() ;  console.log(idElemento);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="tbl_3"  class="table table-striped table-bordered table-hover">

<thead>
  <tr>

    <th style='text-align: center;' >NOME</th>
    <th style='text-align: center;' >SETOR</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>

  </tr>
</thead>

<tbody>


    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="id1" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>

    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="id2" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>
  </table>
    
21.02.2018 / 19:52
2

Simple, just capture the element that was clicked and get its value using the val() method: 

$('table tbody tr td input').dblclick(function(){
   var id = $(this).val(); //captura o id cdo input clicado
   $('p').html(id);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><table><tbody><tr><td><inputid="input1"/>  </td> </tr>
   <tr> <td> <input id="input2"/>  </td> </tr>
   <tr> <td> <input id="input3"/>  </td> </tr>
   <tr> <td> <input id="input4"/>  </td> </tr>
   
 </tbody>

</table>

<p> </p>
    
21.02.2018 / 19:36
Using reCAPTCHA with jQuery (ajax) and PHP Clear VUE v-model data at once