Thursday, March 15

Jquery Form Selector

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

To select a textbox
$('input:text');
To get the textbox value
$('input:text').val();
To set the textbox value
$('input:text').val("New Text");


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

To select a password
$('input:password');
To get the password value
$('input:password').val();
To set the password value
$('input:text').val("New Text");

3. Textarea – $(‘textarea’)

To select a textarea
$('textarea');
To get the textarea value
$('textarea').val();
To set the textarea value
$('textarea').val("New Text in Textarea");

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

To select a radio button
$('input:radio');
To get the selected radio button option
$('input:radio[name=radiobutton-name]:checked').val();
To select the first radio button option
$('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);
or
$('input:radio[name=radiobutton-name]')[0].checked = true;
More detail…

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

To select a checkbox
$('input:checkbox');
To check whether a checkbox is checked
$('input:checkbox[name=checkboxname]').is(':checked');
To check a checkbox
$('input:checkbox[name=checkboxname]').attr('checked',true);
To unchecked a checkbox
$('input:checkbox[name=checkboxname]').attr('checked',false);
More detail…

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

To select a file
$('input:file');
To get the file value
$('input:file').val();

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

To select a hidden value
$('input:hidden');
To get the hidden value
$('input:hidden').val();
To set the hidden value
$('input:hidden').val("New Text");

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

To select a dropdown box
$('select')
or
$('#dropdown-id')
To get the selected drop down box value
$('#dropdown-id').val();
To set the drop down box value to “China”
$("#dropdown-id").val("China");
More details…

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

To select a submit button
$('input:submit');

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

To select a reset button
$('input:reset');

jQuery form selectors Example

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