Get Hidden field value in jQuery: Here in this tutorial will learn how we can get values of the input 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 (textbox), select (dropdown list) , 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
- Get hidden field value By ID in jQuery
- Get hidden field value By Name in jQuery
- Get hidden field value By Type in jQuery
Add HTML Markup : Input Hidden
Here we 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 js 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. And below alert message we display our hidden field value.#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
You can also check these articles:
- Preview Image before uploads it with jQuery in Asp.net.
- How to get the filename, size, type count in jQuery [input file, File Api].
- Create a dynamic HTML table using jquery.
- How to remove table row tr in jquery on button click.
- Jquery: How to disable Button, Div, Anchor tag.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *