How can I access <input type="hidden"> tag's value attribute using jQuery?
-
3Possible duplicate of Get value from hidden field - jQueryEvilDr– EvilDr2017-06-19 10:13:19 +00:00Commented Jun 19, 2017 at 10:13
Add a comment
|
9 Answers
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.
4 Comments
Mohammed Rafeeq
alert($('input[type=hidden]#foo').val()); This finds the hidden variable with id foo . This search is more specific.
Edwin Stoteler
@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.
comte
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.
wsrt
Why not only:
$('#foo').val();. Simple, straightforward. And works in all cases with a specific ID, irrespective of whether the field is `hidden'.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
Comments
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="".
1 Comment
Daniel Liuzzi
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 (api.jquery.com/hidden-selector)
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);
Comments
There is nothing special about <input type="hidden">:
$('input[type="hidden"]').val()
Comments
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
1 Comment
Philip Puthenvila
Input hidden does not have a style class property
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
Comments
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) { /* ...*/ }
Comments
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"]');
