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
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.
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.
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
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.
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.
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.
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.
See, we just replace the name selector with the type attribute selector and get the value of it using
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.
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.
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
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.