Home > jQuery > How to Get Hidden Field Value in jQuery?

How to Get Hidden Field Value in jQuery?

If you are looking for ways to get the input hidden field value in jQuery then you are at the right place. Sometimes developers face the problem that jQuery can’t find a hidden element, so today we explore the ways to find it.

In this tutorial, you will learn how you can get the value of the input hidden field using the jQuery val() method.

Hopefully, you may know jQuery is a very powerful javascript library that we can manipulate the DOM element easily. Let’s get started playing with the input hidden fields using jQuery.

See Also: Copy to Clipboard with JavaScript – (also for hidden element)

Get Hidden Field Value in jQuery

To get the value of the input field in jQuery, we will implement an event delegation feature while using the val() function. The val() method is used to get the values of form input elements like input, select, textarea, etc.

If some input fields have been defined as hidden fields then we will use the same val() to get the value of that input hidden fields.

Let’s see some examples of getting the value of input hidden fields in different ways.

Get Hidden Field Value By ID in jQuery

In this method, we will use the input id as a selector to target the hidden field and get the value of that field. You can take anything in the id attribute.

Suppose you have the following input hidden field and its value dynamically generated. And also has one button to trigger the onClick event.

<input id="myInputId" name="myInputName" type="hidden" value="YourBlogCoach" />
<input id="button" type="button" value="Get Hidden Field Value By ID" />

Now you want to get the value of this hidden field, so we will write a simple jQuery onClick function to get it. You can modify the code as you want.

$(document).ready(function(){
	$("#button").on('click', function () {
	    var value = $("#myInputId").val();
	    alert(value);   
	});
});

When you run the above code and click on the button, it will get the value of the field with the val() method and show you as an alert. You can also print the value using the console.log() method.

Get Hidden Field Value by Name In jQuery

Now we will use the name attribute of the input field to get its value. We will target the input field with a name attribute selector.

Let’s say you have the same above HTML code having an input hidden field with the name “myInputName”. Also, one button to trigger the onClick event.

<input id="myInputId" name="myInputName" type="hidden" value="YourBlogCoach">
<input type="button" id="button" value="Get Hidden Field Value By Name">

Now let’s see how we can get the value of this field with the help of the name attribute as a selector to target this field.

$(document).ready(function(){
	$("#button").on('click', function () {
	    var value = $("input[name=myInputName]").val();
	    alert(value);   
	});
});

You can see in the above, that we made on click event function run when clicking on the button. Then get the value of the field using val() method and targetting with the name attribute.

Get Hidden Field Value By type In jQuery

We can also get the value of the input hidden field by targeting the field with an type attribute. You just have to pass the type attribute in the jQuery selector to get the value.

Taken same above HTML code example has an input field and has type attribute as hidden and also has one button for the trigger event.

<input id="myInputId" name="myInputName" type="hidden" value="YourBlogCoach">
<input type="button" id="button" value="Get Hidden Field Value By Type">

Let’s get the value of this field with a type attribute. Make sure you have passed the type attribute and its value. We will target this field the same as we did in the last example with the name attribute. Just replace the name with the type and its value.

$(document).ready(function(){
	$("#button").on('click', function () {
	    var value = $("input[type=hidden]").val();
	    alert(value);   
	});
});

See, we just replace the name selector with the type attribute selector and get the value of it using val() method.

It’s not compulsory that the type will be hidden, it could be any other like text, search, checkbox, radio, address, tel, number, etc.

Note: Use other methods to get field values if you have multiple hidden input types. Because the type=hidden would be the same and it will populate the correct value of that field.

Get Hidden Field Value By Custom Attribute In jQuery

In this last method, we will get the value of the hidden field with a custom attribute. We will target the field with a custom attribute selector.

Suppose you have an input field and you also have a custom attribute to define the extra value in it. So we will use that custom attribute selector to target the input field and get its value.

<input id="myInputId" name="myInputName" type="hidden" data-custom-attr="anotherValue" value="YourBlogCoach">
<input type="button" id="button" value="Get Hidden Field Value By Custom Attribute">

You can see in the above HTML, that we defined the data-custom-attr as a custom attribute and also defined its value. Let’s get the value of the field using it.

$(document).ready(function(){
	$("#button").on('click', function () {
	    var value = $("input[data-custom-attr=anotherValue]").val();
	    alert(value);   
	});
});

The above will also return the same result as other examples. We made an on-click function target the input field with a custom attribute and get the value using val() method.

Note: These example codes will also work for other input fields not only for hidden fields. You just have to pass the specific selector to target the field and then use the val() method to get the value.

Conclusion

So in this tutorial, you learned about getting the hidden value by ID, name, type, and custom attribute in jQuery using the val() method.

To get the value of hidden fields using jQuery is a straightforward process that can be accomplished with just a few lines of code. By utilizing the powerful feature event delegation of jQuery, developers can easily access the values of hidden fields.

FAQs

What is a hidden field in HTML?

A hidden field in HTML is an input type used to store data that needs to be sent back to the server but shouldn’t be displayed to users. It’s typically used in form processing and storing temporary data.

How do I get the value of a hidden field in jQuery?

To get the value of a hidden field in jQuery, you can use the following code snippet: $("#yourHiddenFieldID").val();

Can I change the value of a hidden field in jQuery?

Yes, you can change the value of a hidden field using the same val() function in jQuery like so: $("#yourHiddenFieldID").val("newValue");

Is there a way to hide or show a hidden field dynamically using jQuery?

Absolutely! You can use the hide() and show() functions in jQuery to toggle the display property of a hidden field. Here’s an example: $("#yourHiddenFieldID").toggle();

What if jQuery can’t find hidden element?

Use the event delegation approach to get the hidden elements value using the jQuery val() method.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment