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.

Related Links

• How to Add or Remove Input Fields Dynamically Using jQuery?
• Copy to Clipboard with JavaScript – (also for hidden element)
• How to Bind Dynamically Added Elements with jQuery?
• How to Check If Checkbox is Checked or Not in jQuery?
• How to Add and Remove Class in jQuery?

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