Thursday, March 15

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");