The jQuery :hidden selector select all the hidden elements by considering any of the below situations:
- Element is set to a CSS property
display:none. - Form hidden field using
type="hidden". - When the width and height set to zero(0).
- A hidden parent element hiding the child element as well.
If you want to select or find the hidden elements, you can use the selector. It’s not applicable to the element hidden using the CSS property like visibility:hidden or using the opacity:0.
Syntax of jQuery :hidden Selector
the syntax of the jQuery :hidden selector is given below.
There is no parameter or argument you have to use with this selector. However, you have to use the element name, class or id before the keyword :hidden to select only the specified element.
Check the example below to get the find the hidden elements.
How jQuery :hidden Selector Select Hidden Elements
If you want to get the hidden element inside the div which is set to a CSS property display:none. You have to use the below example which displays the hidden element on button click. It uses the jQuery show() after selecting the element using the jQuery :hidden selector.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( ".myhidediv p:hidden" ).show(1000); }); }); </script> <style> .myphide{ display:none; } </style> <p><button type="button" class="mybtn">Click to Display Hidden Element</button></p> <div class="myhidediv"> <p>Welcome to Tutorialdeep!</p> <p>Use codes to your project freely.</p> <p>Modify and run your codes live with our editor.</p> <p class="myphide">Create your website with our <a href="https://tutorialdeep.com/wordpress-tutorial/free-wordpress-blog-setup-service/" target="_blank" rel="noopener noreferrer">free blog setup service</a>.</p> </div> |
Output
Welcome to Tutorialdeep!
Use codes to your project freely.
Modify and run your codes live with our editor.
Create your website with our free blog setup service.
When you click the button given above, the selector first selects the hidden element. After selecting, it displays the element using the show() with a speed of 1sec. By using the above method, you can find the hidden items from any elements of your choice.
Find Value of All Hidden Elements inside a Form
A form element may contain many hidden fields which many code may use to track the submission. The below form contains the two hidden input field with type="hidden". You can find the value of the hidden fields using the below example.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script> $(document).ready(function(){ $('.myformbtn').click(function(){ $( ".myformtag input:hidden" ).each(function(){ var y = $(this).val(); alert(y); }); }); }); </script> <style> .myformdiv{ border:1px solid #ccc; padding: 10px; margin:10px 0; max-width: 275px; background: #efefef; } </style> <p><button type="button" class="myformbtn">Click to Find Value of Hidden Element</button></p> <div class="myformdiv"> <form class="myformtag"> <input type="text" placeholder="Enter your name..."><br> <input type="text" placeholder="Enter your email..."> <button type="button" class="btn btn-primary">Submit</button> <input type="hidden" placeholder="myname" value="name"> <input type="hidden" placeholder="mytrackform" value="email"> </form> </div> |
Output
When you click the button given above, it finds the value of all the hidden element using the jQuery each(). An alert box will start appear for two times which displays the value of the hidden elements.