How to use JQuery Form Filters : Examples

JQuery Form filters let you deal with form elements in the DOM easily. For more information and usage about JQuery form filters please refer this post.

This post written by me has more about jquery form filters in details.
In this tutorial we will demonstrate how to select form elements with Jquery filters and apply some CSS changes for it.

1. Find all input, select, textarea, and button elements
   $("form :input").css("border", "3px solid red");
   
   This will select all input, select, textarea, and button elements and put a red border around it


2. Find all text elements
   $("form :text").css("border", "3px solid red");
   
   This will select all text elements and put a red border around it


3. Find all radio elements
   $("form :radio").css("border", "3px solid red");
   
   This will select all radio button elements and put a red border around it


4. Find all checkbox elements
   $("form :checkbox").css("border", "3px solid red");
   
   This will select all chechbox elements and put a red border around it


5. Find all submit elements
   $("form :submit").css("border", "3px solid red");
   
   This will select all submit elements and put a red border around it


6. Find all button elements
   $("form :button").css("border", "3px solid red");
   
   This will select all button elements and put a red border around it


7. Find all file update elements
   $("form :file").css("border", "3px solid red");
   
   This will select all file elements and put a red border around it

Some more fabulous examples

1. Find all form elements that are enabled
   $("form :text:enabled").css("border", "3px solid red");
   
   This will find out all text elements that are enabled and put a red border around it
   
   
2. Find all form elements that are ckecked (radiobuttons and checkboxes)
   
   • $("form :checked").css("border", "3px solid red");
     
     This will find out all form elements that are checked and put a red border around it
   • $("form :checkbox:checked").css("border", "3px solid red");
     
     This will find out all checkboxes that are checked and put a red border around it

This will find out all form elements that are selected and put a red border around it

From this link you can find the sample files used for this tutorial

Note: Make sure you have added your jquery reference correctly.
          If a border doesn't show up use "outline" instead of "border" inside the CSS method. 
Please add a comment if something is not clear or you have something to add