199

How can I access <input type="hidden"> tag's value attribute using jQuery?

Teun Zengerink
  • 4,277
  • 5
  • 30
  • 32
I-M-JM
  • 15,732
  • 26
  • 77
  • 103
  • 3
    Possible duplicate of [Get value from hidden field - jQuery](https://stackoverflow.com/questions/3091374/get-value-from-hidden-field-jquery) – EvilDr Jun 19 '17 at 10:13

9 Answers9

390

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.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • 11
    alert($('input[type=hidden]#foo').val()); This finds the hidden variable with id foo . This search is more specific. – Mohammed Rafeeq Mar 07 '14 at 12:40
  • 6
    @MohammedRafeeq alert($('#foo').val()); Is just as specific. Because an id is unique in the DOM. Therefor it will always find just one element if the html follows the standards. Unless you use the statement to check if the element is hidden or not. – Edwin Stoteler Apr 29 '15 at 09:21
  • 1
    what is faster ? $('#foo') or $('input:hidden#foo') ? i suspect the second since more search info given but not sure how it's implemented, so don't know if my feeling is correct. EDIT: ok i have my answer thanks to Abel comment,id only, ie #foo is faster. – comte Nov 29 '15 at 14:03
  • Why not only: `$('#foo').val();`. Simple, straightforward. And works in all cases with a specific `ID`, irrespective of whether the field is `hidden'. – carla Oct 10 '22 at 12:49
19

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

Abel ANEIROS
  • 6,029
  • 2
  • 25
  • 19
18

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="".

kaiser
  • 21,817
  • 17
  • 90
  • 110
  • 3
    Note that this will also match elements that have a CSS display value of none, elements that have a width and height set to 0, and elements that have a hidden ancestor (https://api.jquery.com/hidden-selector/) – Daniel Liuzzi Sep 14 '18 at 09:51
6

To get value, use:

$.each($('input'),function(i,val){
    if($(this).attr("type")=="hidden"){
        var valueOfHidFiled=$(this).val();
        alert(valueOfHidFiled);
    }
});

or:

var valueOfHidFiled=$('input[type=hidden]').val();
alert(valueOfHidFiled);

To set value, use: 

$('input[type=hidden]').attr('value',newValue);
the_root
  • 329
  • 3
  • 9
4

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
Rodrigo Longo
  • 1,369
  • 10
  • 15
4

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

$('input[type="hidden"]').val()
Maxim Sloyko
  • 15,176
  • 9
  • 43
  • 49
3

If you have an asp.net HiddenField you need to:

To access HiddenField Value:

$('#<%=HF.ClientID%>').val()  // HF = your hiddenfield ID

To set HiddenFieldValue 

$('#<%=HF.ClientID%>').val('some value')   // HF = your hiddenfield ID
lucian.pantelimon
  • 3,673
  • 4
  • 29
  • 46
Bruno Ferreira
  • 89
  • 7
1

Watch out if you want to retrieve a boolean value from a hidden field!

For example:

<input type="hidden" id="SomeBoolean" value="False"/>

(An input like this will be rendered by ASP MVC if you use @Html.HiddenFor(m => m.SomeBoolean).)

Then the following will return a string 'False', not a JS boolean!

var notABool = $('#SomeBoolean').val();

If you want to use the boolean for some logic, use the following instead:

var aBool = $('#SomeBoolean').val() === 'True';
if (aBool) { /* ...*/ }
Georg Patscheider
  • 9,357
  • 1
  • 26
  • 36
-1

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"]');
Marcin Żurek
  • 145
  • 1
  • 3