Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Working with forms-Jquery form selector
Posted By Sarin on Apr 10, 2012     RSS Feeds     Latest Hinduism news
1784 Views

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

Share this to your friends. One of your friend is waiting for your share.

Related Articles
Manipulating Elements and Animations Using Jquery
Select Parent, Child, sibling,descendants HTML element using jquery
What is Silverlight,its features and how it works
Advanced JQuery Fading Effects
Jquery features, Advantages and disadvantages
Call JavaScript functions from silverlight
JQuery FAQ and Jquery Effects
Select Groups of similar elements using position selector
Different Strings Format for numbers
Calling silverlight methods from javascript

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes