jQuery: How to get hidden field value by Id, by name, and by type

Get Hidden field value in jQuery: Here in this tutorial will learn how we can get values of the hidden field in jQuery.  As jQuery is a powerful javascript library by using which we can manipulate HTML DOM easily. In jQuery to get hidden field value we use.val() method.

The .val() method is used to get the values of form elements such as input, select, textarea. You can also check our previous article on how to set hidden field values in jQuery.

3 Ways to Get Hidden Field Value in jQuery

1. Get hidden field value by Id in jQuery
2. Get hidden field value by name in jQuery
3. Get hidden field value by type in jQuery

Add HTML Markup : Input Hidden

Here add an input tag hidden field with id as myInputHidden and name as myInputName.

<input id="myInputHidden" name="myInputName" type="hidden" value="Codepedia" />

Next, we write code to read hidden field values in jquery with 3 different approaches.

#1 jQuery Code To Get hidden field value by ID

var getValue= $("#myInputHidden").val();
alert(getValue);

Here we select the input hidden field by the ID, i.e myInputHidden, and with the jQuery .val() method we get the value of it.

View Demo

#2 jQuery Code To Get hidden field value by name

var getValue= $("input[name=myInputName]").val();
alert(getValue);

Here we select an element with its name, and with Val() method we get the input hidden field value.
View Demo

#3 jQuery Code To Get hidden field value by type

var getValue= $("input[type=hidden]").val();
alert(getValue);

Here in the above jquery code, we select input hidden filed by its type i.e hidden, and then by using jquery .val() we get the hidden field value.
View Demo

Conclusion: That's it we just need to change the element ID respectively and with the .val() method we get the value of our input hidden field.  Make sure ID attributes should be unique on a web page. Here in the demo example on button click, we alert hidden field value by ID, by name, and by type.

Other Reference

• jQuery .val() method
• Hidden Field HTML tag

You can also check these articles:

1. Preview Image before uploads it with jQuery in Asp.net.
2. How to get the filename, size, type count in jQuery [input file, File Api].
3. Create a dynamic HTML table using jquery.
4. How to remove table row tr in jquery on button click.
5. Jquery: How to disable Button, Div, Anchor tag.