jQuery access input hidden value

Question

How can I access tag\'s value attribute using jQuery?

Answer 1

If you want to select an individual hidden field, you can select it through the different selectors of jQuery :

<input type="hidden" id="hiddenField" name="hiddenField" class="hiddenField"/> 


$("#hiddenField").val(); //by id
$("[name='hiddenField']").val(); // by name
$(".hiddenField").val(); // by class

Answer 2

Most universal way is to take value by name. It doesn't matter if its input or select form element type.

var value = $('[name="foo"]');

Answer 3

There is nothing special about <input type="hidden">:

$('input[type="hidden"]').val()

Answer 4

You can access hidden fields' values with val(), just like you can do on any other input element:

<input type="hidden" id="foo" name="zyx" value="bar" />

alert($('input#foo').val());
alert($('input[name=zyx]').val());
alert($('input[type=hidden]').val());
alert($(':hidden#foo').val());
alert($('input:hidden[name=zyx]').val());

Those all mean the same thing in this example.

Answer 5

There's a jQuery selector for that:

// Get all form fields that are hidden
var hidden_fields = $( this ).find( 'input:hidden' );

// Filter those which have a specific type
hidden_fields.attr( 'text' );

Will give you all hidden input fields and filter by those with a specific type="".

Answer 6

The most efficient way is by ID.

$("#foo").val(); //by id

You can read more here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

https://developers.google.com/speed/docs/best-practices/rendering?hl=it#UseEfficientCSSSelectors