Working with forms-Jquery form selector
The type of selector explained here was defined exclusively by jquery developer only for html form controls. jQuery has a special set of filters just for selecting elements in HTML forms.
Let us create a demo project with all kind of form controls as shown below:
<select name="AsianCountries">
<option>India</option><option>China</option><option>Russia</option>
</select>
<input type="button" value="button" />
<input type="reset" value="reset" />
<input type="submit" value="submit" />
<input type="hidden" value="hidden" />
<input type="text" value="text" />
<input type="password" value="password" />
<br /><br />
<input type="radio" name="Gender" value="male" checked="checked">Male</input>
<input type="radio" name="Gender" value="Female">Female</input>
<br /><br />
<input type="checkbox" value="India">India</input>
<input type="checkbox" value="US">US</input>
<input type="checkbox" value="UK">UK</input>
let us learn how to select each of the form controls using the first form controls defined above sequentially.
✓ :[name = AsianCountries]: Selects element whose name attribute is set to ‘AsianCountries’. This is mostly used for select form control. by specifying a name . However, it is applicable to other form controls as well. The following code will alert the user with the value of the option selected in the select control
alert($('[name = AsianCountries]').val());
✓ :input: Selects all form elements including <input />, <select>, <text>, and <button>. The following code will alert the user with the number of input elements in your html form.
alert( $(':input').length);
When a selector selects more than one element, the result is a list of values known as an array .i.e when I select all the inputs on my page, I get back an array of all the elements. The length keyword tells me how many elements are in my array.
✓ :button: Selects all elements with the type attribute set to button. The following code will alert the user with the value of the button element of your html form.
alert($(':button').val());
✓ :reset: Selects all elements with the type attribute set to button. The following code will alert the user with the value of the reset'element of your html form.
alert($(':reset').val());
✓ :submit :Selects all elements with the type attribute set to submit. The following code will alert the user with the value of the submit element of your html form.
alert($(':submit').val());
✓ :text: Selects all elements with the type attribute set to text. The following code will alert the user with the value of the text element of your html form.
alert($(':text').val());
✓: password: Selects all elements with the type attribute set to password'. The following code will alert the user with the value of the password element of your html form.
alert($(':password').val());
✓ :radio: Selects all checked out radio elements set using the type attribute set to radio. The following code will alert the user radio element value, checked out by the user action
alert($(':radio:checked').val());
✓ :checkbox: Selects all checked out checkbox elements set using the type attribute set to checkbox. The following code will alert the user checkbox element value, checked out by the user action
alert($(':checkbox:checked').val());
✓ :checked: Selects all check boxes and radio buttons that are checked. The following code will alert the user with the number of radio and checkbox checked elements
alert($(':checked').length);
Selecting Visibility
Beside Above Selector, we can also select elements by visibility. These selectors are very handy when you are using animations like show and hide.
✓ :hidden: Selects all hidden elements
✓ :visible: Selects all visible elements
Some other commonly used selectors:
: animated Selects elements that are currently under animated control.
: button Selects any button (input[type=submit], input[type=reset],
: checked Selects only check boxes or radio buttons that are checked (supported by CSS).
: contains(foo) Selects only elements containing the text foo.
: disabled Selects only form elements that are disabled in the interface (supported by CSS).
: enabled Selects only form elements that are enabled in the interface (supported by CSS).
: file Selects all file elements (input[type=file]).
: header Selects only elements that are headers; for example: <h1> through <h6> elements.
: hidden Selects only elements that are hidden.
: image Selects form images (input[type=image]).
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Commonly used string Functions
JQuery FAQ and Jquery Effects
Appending Html elements or contents dynamically
How AJAX Works, advantages and disadvantages
Manipulating Elements and Animations Using Jquery
Get Set Value of any HTML element using jquery-Val function
Select Parent, Child, sibling,descendants HTML element using jquery
What is Silverlight,its features and how it works
Call JavaScript functions from silverlight
How Silverlight works internally
Post Comment