jQuery has filters that make it easy to select form elements. This section will explain how many, and what are the filters to select those elements.
The filters belonging to this category are as follows:
|
Name |
Description |
|---|---|
|
|
Selects all of the button elements and input elements of type button. |
|
|
Selects all of the elements of type |
|
|
Selects all of the input elements that are and select elements that are selected. |
|
|
Selects all of the elements that are disabled. |
|
|
Selects all of the elements that are enabled. |
|
|
Selects all of the elements of type |
|
|
Selects all of the elements of type |
|
|
Select all of the elements that belong to one of these type: |
|
|
Selects all of the elements of type |
|
|
Selects all of the elements of type |
|
|
Selects all of the elements of type |
|
|
Selects all of the elements that are |
|
|
Selects all of the elements of type |
|
|
Selects all of the elements of type |
Please, also consider the following note.
Note
Until few weeks ago, the documentation asserted that :checked selects only checked elements. This was false because it actually selects also option elements that are selected. Proof:
return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);
I've sent a pull request (pull #306) for this issue that has been accepted and merged, but if you already know this selector, keep this note in mind.
Wow, there are really a lot of filters belonging to this category. Our goal is to print the selected nodes on the console using some of the listed filters. To do that, follow these steps:
Create a copy of the
template.htmlfile and rename it asform-filters.html.Inside the
<body>tag, add the following HTML markup:<form name="registration-form" id="registration-form" action="registration.php" method="post"> <label>Name:</label> <input type="text" name="name" placeholder="Name" /> <label>Surname:</label> <input type="text" name="surname" placeholder="Surname" /> <label>Email:</label> <input type="email" name="email" placeholder="Email" /> <label>Phone:</label> <input type="tel" name="phone-number" placeholder="Phone number" disabled="disabled" /> <label>Privacy:</label> <input name="privacy" type="checkbox" checked="checked" /> <label>Contact me:</label> <input name="contact-me" type="checkbox" /> <label>Sex:</label> <select name="sex"> <option selected="selected" value="m">Male</option> <option value="f">Female</option> </select> <input type="submit" value="Register" /> </form>Edit the
<head>section of the page adding this code:<script> $(document).ready(function() { console.log($(':input').length); console.log($(':selected').length); console.log($('input:disabled').length); }); </script>Save the file and open it with your favorite browser.
After creating the file for this recipe's example, we wrote a form to see our new selectors in action. As always, the third step is reserved to the JavaScript code we're going to analyze. To keep the example simple, the first two lines use implicitly the All selector. As pointed out before, it'll result in lower performance and you should avoid its use in your websites and applications. However, since we have very few nodes, the difference won't be evident.
Once opened, our page will print the following result:
Let's understand why.
In the first selection, using the :input filter, we collect the elements that belong to one of these type: input, select, textarea, and button. Then, we simply print the length of the collection on the console. The selection retrieves 7 <input> instances, 1 <select>, 0 <textarea> instances, and 0 <button> instances, and this explains why the first printed length is 8.
On the second line, we collect all of the elements that have the selected attribute applied (regardless of its value). Reading the HTML code, it isn't hard to see that the only retrieved element is the option having text "Male", and therefore the second printed line on the console is 1.
The last selection takes advantage of the Element selector to speed up performance and see how filters can be applied to other selectors. Here, we're asking jQuery to select all of the <input> elements that have the disabled attribute applied (regardless of its value). This time too there is just one match corresponding to the element having label "Phone." Just like the previous statement, printing the length property will display the value 1.