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. 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.

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 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.

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 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.

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 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.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.