Jquery Form Selector

1. TextBox – $(‘input:text’)

To select a textbox


To get the textbox value


To set the textbox value

$('input:text').val("New Text");

2. Password – $(‘input:password’)

To select a password


To get the password value


To set the password value

$('input:text').val("New Text");

3. Textarea – $(‘textarea’)

To select a textarea


To get the textarea value


To set the textarea value

$('textarea').val("New Text in Textarea");

4. Radio Buttons – $(‘input:radio’)

To select a radio button


To get the selected radio button option


To select the first radio button option

$('input:radio[name=radiobutton-name]')[0].checked = true;

More detail…

5. Check Box – $(‘input:checkbox’)

To select a checkbox


To check whether a checkbox is checked


To check a checkbox


To unchecked a checkbox


More detail…

6. Upload File – $(‘input:file’)

To select a file


To get the file value


7. Hidden value – $(‘input:hidden’)

To select a hidden value


To get the hidden value


To set the hidden value

$('input:hidden').val("New Text");

8. Select(dropdown box) – $(‘select’)

To select a dropdown box


To get the selected drop down box value


To set the drop down box value to “China”


More details…

9. Submit button – $(‘input:submit’)

To select a submit button


10. Reset button – $(‘input:reset’)

To select a reset button


jQuery form selectors Example

<title>jQuery form selector example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
<h1>jQuery form selector example</h1>
<h2>Message = <label id="msg"></label></h2>
<form name="testing" action="#">
TextBox : <input type="textbox" value="This is message from textbox" />
Password : <input type="password" value="This is message from password" />
TextArea : <textarea>This is message from textarea</textarea>
Radio : <input name="sex" type="radio" value="Male" checked>Male</input>
<input name="sex" type="radio" value="Female">Female</input>
CheckBox : <input type="checkbox" name="checkme">Check Me</input>
File : <input type="file"></input>
Hidden : <input type="hidden" value="This is message from hidden"/>
Country : <select id="country">
<option value="China">China</option>
<option value="United State">United State</option>
<input type="submit"></input> <input type="reset"></input>
<button id="text">input:text</button>
<button id="password">input:password</button>
<button id="textarea">textarea</button>
<button id="radio">input:radio</button>
<button id="checkbox">input:checkbox</button>
<button id="file">input:file</button>
<button id="hidden">input:hidden</button>
<button id="select">select</button>
<button id="submit">input:submit</button>
<button id="reset">input:reset</button>
<script type="text/javascript">
$("#text, #password, #hidden,
#textarea, #file, #submit, #reset").click(function () {
var str = $(this).text();
$('input, textarea, select').css("background", "#ffffff");
$(str).css("background", "#ff0000");
$("#radio").click(function () {
$('input, textarea, select').css("background", "#ffffff");
$("#checkbox").click(function () {
var str = $(this).text();
$('input, textarea, select').css("background", "#ffffff");
$('#msg').html("Checkbox is checked");
$('#msg').html("Checkbox is uncheck");
$("#select").click(function () {
$('input, textarea, select').css("background", "#ffffff");

Say something : I accept all the "Humer&Critic"

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s