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. 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 use the val() function. The val() method 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 have 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 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 of “myInputName” and 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 targetting the field with a type attribute. You just have to pass the type attribute in the jQuery selector to get the value.

Taken same above HTML code example that has 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 type and ita 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 any other like text, search, checkbox, radio, address, tel, number, etc.

Note: If you have more than one input type hidden fields then I would suggest you use the other three methods to get the value of fields. 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 above examples. We made an on-click function and 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.

That’s it.

See Also: How to Add or Remove Input Fields Dynamically Using jQuery?