Selecting DOM elements with jQuery – Form Filters

This entry is part 4 of 5 in the series jQuery DOM Filters

This is the last post of the series explaining selection of DOM elements with jQuery. We started with basic and hierarchal selectors. Then, we read about filters in posts covering filters in two parts – Part 1 and Part 2. Forms are an important part of webpages, so we have a special section of filters for selecting the HTML form elements. Certain HTML elements are form specific and certain form elements too, have unique properties.

The Form filters can be categorized into three groups:

  1. By Element Type
  2. By Element’s State (Enabled/Disabled)
  3. By Element’s Status (Checked/Selected)

By Element Type

These filters target the form elements by the element type. These are the most common of the form filters. The filters are available to select each type of form element. So, we have following form filters:

:input, :button, :checkbox, :file, :image, :password, :radio, :submit, :reset,  and :text

The names of filters convey their use, let’s take a look at the use of each of the filters:

//To Select all Input elements

$('input');

//To Select all Textboxes

$('input:text');

//To Select all Passwords type elements

$('input:password');

//To Select all Radio Buttons

$('input:radio');

//To Select all Checkboxes

$('input:checkbox');

//To Select all input elements of Submit type

$('input:submit');

//To Select all Textarea elements

$('textarea');

//To Select all Buttons

$('input:button');

//To Select all File fields

$('input:file');

//To Select all Reset Buttons

$('input:reset'); 

By Element’s State (Enabled/Disabled)

All form elements might not be enabled all the time. So, you might need to select form elements that are either in enabled or disabled state. There are two filters for the purpose of selecting such form elements. The :enabled filter allows you to select all the enabled form elements and :disabled lets you filter all the disabled elements.

//Selects all disabled elements

$(":disabled"); 

By Element’s Status (Checked/Selected)

The radio buttons and checkboxes have unique properties of selected and checked respectively. Therefore, the filters :selected and :checked to filter the selected radio buttons and checked checkboxes.

//Selects all the checked form elements

$(":checked");

//Selects all the selected form elements

$(":selected"); 

With this post, we conclude the topic of selecting DOM elements with jQuery.

Series Navigation