0

Jquery form selectors and filters

Jquery form selectors and filters, if you want to work with forms using here is a list of selectors and filters you can use it for forms. Before writing any jquery code, link to jquery file in head section. And after that on document ready i’m using a code snippet for showing all these form selectors and filters in jquery. First of all create a form using html, if you want to learn about HTML5 Form new input field types. If you want to learn about HTML5 form validation.

Below is html code for form, here I’m using all types of input fields.
[html] <form action="" method="post">
<p>
<label>User Name : </label>
<input type="text" name="username" />
</p>

<p>
<label>New User Name : </label>
<input type="text" name="username" disabled/>
</p>

<p>
<label>Password : </label>
<input type="password" name="password" />
</p>

<p>
<label>Gender : </label>
<input type="radio" name="gender" value="male" checked/> Male
<input type="radio" name="gender" value="female" /> Female
</p>

<p>
<label>Hobbies : </label>
<input type="checkbox" name="hoby" value="music" checked/> Music
<input type="checkbox" name="hody" value="chess" checked/> Chess
</p>

<p>
<label>Country : </label>
<select name="country">
<option value="">Select</option>
<option value="in" selected>India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</p>

<p>
<label>Profile Image : </label>
<input type="file" name="profile-image" />
</p>

<p>
<label>Message : </label>
<textarea name="message" rows="3" cols="15"></textarea>
</p>

<p>
<input type="submit" value="Register" />
<input type="reset" value="Reset" />
<button name="login" value="login" >Login</button>
</p>

</form>
[/html]

For writing or using jquery code in our html document, we need to link jquery file in head section. Code snippet for linking jquery file, I’m linking it from directly jquery.com. Add this code before closing head tag.
[html] <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
[/html]

Add this code after second step, that means after linking jquery file then only add this code snippet.
[js] <script>
$("document").ready(function(){
//Our code will go here, add here next steps code.
});
</script>
[/js]

These are available Jquery selectors

1. :input
2. :text
3. :password
4. :radio
5. :checkbox
6. :submit
7. :reset
8. :button
9. :file

1. Jquery Input selector

For selecting all input fields in html document using jquery, you can use this below code snippet. In this code, jquery will select all input fields and applies css style of background colour.
[js] <script>
$("document").ready(function(){
$( ":input" ).css( "background", "#525673" );
});
</script>
[/js]

2. Jquery text selector

For selecting only input type text field we will this selector, after selecting text input fields I’m applying some CSS.

[js] <script>
$("document").ready(function(){
$( ":text" ).css( "background", "#525673" );
});
</script>
[/js]

3. Jquery password selector

Jquery password selector will be used for selecting input type password fields.

[js] <script>
$("document").ready(function(){
$( ":password" ).css( "background", "#525673" );
});
</script>
[/js]

4. Jquery radio selector

Radio selector will be used for selecting radio input type fields.
[js] <script>
$("document").ready(function(){
$( ":radio" ).css( "background", "#525673" );
});
</script>
[/js]

5. Jquery checkbox selector

Checkbox selector will be used for selecting check boxes.
[js] <script>
$("document").ready(function(){
$( ":checkbox" ).css( "background", "#525673" );
});
</script>
[/js]

6. Jquery Submit selector

Submit selector will select’s input type submit field.
[js] <script>
$("document").ready(function(){
$( ":submit" ).css( "background", "#525673" );
});
</script>
[/js]

7. Jquery Reset Selector

Reset selector will selects, all reset input type buttons.
[js] <script>
$("document").ready(function(){
$( ":reset" ).css( "background", "#525673" );
});
</script>
[/js]

8. Jquery Button Selector

Button selector will selects, button filed types.
[js] <script>
$("document").ready(function(){
$( ":button" ).css( "background", "#525673" );
});
</script>
[/js]

9. Jquery File Selector

File selector will selects input type file.
[js] <script>
$("document").ready(function(){
$( ":file" ).css( "background", "#525673" );
});
</script>
[/js]

Jquery filters will be used for filtering input type, for example if you want to select radio buttons that are selected or input fields that are disabled, then we can use these filters.

1. :disabled
2. :enabled
3. :checked
4. :selected

1. Jquuery filter :disabled

In html I’ve added a disabled input text field, by using this filter you can select disabled fields.
[js] <script>
$("document").ready(function(){
$( ":disabled" ).css( "background", "#525673" );
});
</script>
[/js]

2. Jquery filter :enabled

By using this enabled jquery filter, you can select not disabled input fields.

[js] <script>
$("document").ready(function(){
$( ":enabled" ).css( "background", "#525673" );
});
</script>
[/js]

3. Jquery filter checked

Checked filter will be used for selecting input fields that are checked. For example like radio buttons and checkboxes that are checked.
[js] <script>
$("document").ready(function(){
$( ":checked" ).css( "background", "#525673" );
});
</script>
[/js]

4. Jquery filter selected

Select filter will be used for select drop down menus. selected option will gets selected using this filter.
[js] <script>
$("document").ready(function(){
$( ":selected" ).css( "background", "#525673" );
});
</script>
[/js]

These are the jquery selectors and filters to work with HTML forms.