How do I get the value of an input hidden with jquery

0

I was able to dynamically generate a table with some hidden fields that may not appear. But I'm having trouble fetching these fields and then sending them to a post. Here is the generated html code.

<tr>
<td>Tenis Azul</td>
<td>35</td>
<td>99.99</td>
<td>Admin</td>
<td><input type="checkbox" value="true"></td>
<td><a class="botao-remover btn btn-danger glyphicon glyphicon-trash" href="#"></a></td>
<input type="hidden" value="1">
<input type="hidden" value="35">
<input type="hidden" value="99.99">
<input type="hidden" value="1">
<input type="hidden" value="1">
</tr>

I have several generated like this. But at the time of selecting the values I do not know how to fetch to store in variables. I've already tried .attr ("value"). Val () but not right.

var linhas = $("tbody>tr");
  linhas.each(function(){
    var id_produto = $(this).find("input:nth-child(1)").attr("value").val();
    console.log(id_produto);
  });

Error:

Uncaught TypeError: $(...).find(...).attr(...).val is not a function

Can anyone help me? Thank you in advance

    
asked by anonymous 28.11.2018 / 18:25

5 answers

0

One solution is to define a class for the hidden fields and then loop

$('.escodido').each(function() {
    console.log($(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tr><td>TenisAzul</td><td>35</td><td>99.99</td><td>Admin</td><td><inputtype="checkbox" value="true"></td>
  <td>
    <a class="botao-remover btn btn-danger glyphicon glyphicon-trash" href="#"></a>
  </td>
  <input type="hidden" class="escodido" value="1">
  <input type="hidden" class="escodido" value="35">
  <input type="hidden" class="escodido" value="99.99">
  <input type="hidden" class="escodido" value="1">
  <input type="hidden" class="escodido" value="1">
</tr>
    
28.11.2018 / 18:34
0

Try this:

function getHiddens() {
    var hiddens = $("table#tabMinhasTarefas input[type='hidden']");
    for (var i = 0; i < hiddens.length; i++) {
         alert(hiddens[i].value);
    }
}

Hugs

    
28.11.2018 / 18:40
0

If you want to send these inputs to the server, there is no need to use JS for this, you just have to assign% s to% s correctly.

The server knows that inputs with repeated names are arrays (unless you use PHP there would use name ).

Here is an example where I use the HttpBin service to display the data the server receives.

const btn = document.querySelector('#add')
const tbody = document.querySelector('#tbody')
const linha_modelo = tbody.querySelector('tr')

btn.addEventListener('click', function(){
    let clone = linha_modelo.cloneNode(true)
    tbody.appendChild(clone)
});
<form method="post" action="https://httpbin.org/post">

  <button id="add" type="button">Adicionar linha</button>
  
  <hr>
  
  <table>
    <thead>
      <tr>
        <th>Coluna</th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td>
          Linhas dinâmicas com input hidden
          <input type="hidden" name="input-hidden-1" value="valor teste">
          <input type="hidden" name="input-hidden-2" value="valor teste">
          <input type="hidden" name="input-hidden-3" value="valor teste">
        </td>
      </tr>
    </tbody>
  </table>
  
  <hr>
  
  <button type="submit">Enviar</button>
</form>

Concept docs used:

28.11.2018 / 20:23
0

The: hidden switch solves your problem. In addition, by example, it can take elements with attribute hidden or display:none

$('input:hidden').each(function() {
    console.log($(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputtype="hidden" value="1">
  <input type="text" hidden value="2">
  <input type="checkbox" style="display: none" value="3">
  

link

    
28.11.2018 / 20:34
0

Use an id in the fields that you need to get the value Ex

<input type="hidden" id="valor1" value="1">
<input type="hidden" id="valor2" value="35">
<input type="hidden" id="valor3" value="99.99">
<input type="hidden" id="valor4" value="1">
<input type="hidden" id="valor5" value="1">

You can then use js or jquery to get the value you need. Ex

$(document).ready(function () {
    var valor1 = null;
    var valor2 = null;
    var valor3 = null;
    var valor4 = null;
    var valor5 = null;

    $(function() {
        // como vc pode receber o valor de um campo tipo hidden
        $('#valor1').val();
        $('#valor2').val();
        $('#valor3').val();
        $('#valor4').val();
        $('#valor5').val();
        // salvando em uma variavel que foi defida acima VAR valor...
        valor1 = $('#valor1').val();
        valor2 = $('#valor2').val();
        valor3 = $('#valor3').val();
        valor4 = $('#valor4').val();
        valor5 = $('#valor5').val();
        // aqui vc verifica se está recebendo o valor do input
        console.log(valor1);
    });
});
    
28.11.2018 / 20:50