Question

I have a table with a cell that contains a hidden input type. How do you go about accessing the value of this hidden input type?

HTML Table:

<table id = "tableId">
  <tr>
    <td>FirstName LastName</td>
    <td><input type="hidden" value="userId" /><td>
  </tr>

Javascript

    var table= document.getElementById("tableId");
    var tblTR = table.getElementsByTagName("tr");
    for (var i = 0; i<tblTR.length; i ++) {
        var tr = tblTR[i];
        var tds = tr.getElementsByTagName("td");
        console.debug(tds[0]); //gets the whole cell
        console.debug(tds[1].innerHTML); //gets content of cell, but not the actual value of the hidden input
}

With the second console.debug statement, the value I’m looking for is “userId” and not

<input type="hidden" value="userId" />

From what I understand, a td element cannot have a value attribute, therefore I can’t simply just do a tds[i].value;.

Alternatively, is there another approach that can be used to store this hidden value?

Answer 1

The following works:

var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
    if (inputs[i].type == 'hidden'){
        alert(inputs[i].value);
    }
}

JS Fiddle demo.

I’d suggest assigning the inputs[i].value to a variable, or an array, though rather than simply alert()-ing it:

var inputs = document.getElementsByTagName('input');
var values;

for (i=0; i<inputs.length; i++){
    if (inputs[i].type == 'hidden'){
        values = inputs[i].value;
    }
}