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

Question

I was able to dynamically generate a table with some hidden fields that cannot appear. But I’m having difficulty searching these fields to send them to a post. Follow 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 when selecting values I don’t know how to search to store in variables. I’ve tried . attr("value"). val() but not for sure.

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? Thanks in advance

Answer 1

The :Hidden selector solves your problem. Even, according to the example, it can pick 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>

  <input type="hidden" value="1">
  <input type="text" hidden value="2">
  <input type="checkbox" style="display: none" value="3">

https://api.jquery.com/hidden-selector/

Answer 2

One solution is to define a class for the fields hidden and then make a 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>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" 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>

Answer 3

Try this:

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

Hugs

Answer 4

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

The server knows that inputs with repeated names are arrays (unless you use PHP then you would use []).

Here’s an example where I use the service Httpbin to show 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>

Docs of the concepts used:

• Httpbin POST data dump
• Node.cloneNode()
• Node.appendChild()
• Element.querySelector()
• EventTarget.addEventListener()

Answer 5

Use an id in the fields you need to receive 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">

Then you can 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);
    });
});