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.
Creating a Form
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]
Linking jquery file in head section
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]
Adding our Jquery Script
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]
Jquery Selectors
These are available Jquery selectors
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :reset
- :button
- :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
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.
- :disabled
- :enabled
- :checked
- :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.