jQuery form selectors example

jQuery come with many form selectors to access the form elements more easily and efficiently. Here’s a simple jQuery form selectors reference.

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


<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>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
11 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Mithun PattankaroutletadeljQuery form, 100 Best plugins, tools & tutorials « Zeeshan Akhter10 forms based on jQuery scripts and plug-ins to enhance - Open News Recent comment authors
newest oldest most voted
Muneo
Guest
Muneo

Hi, I am trying to get the specific fields from specific form. I tried this: jQuery(“form#formname input:text”).css…
But this no works in IE!
If I remove form#formname works! I have more forms in page and I need select only one!

Mithun Pattankar
Guest
Mithun Pattankar

This is one place to get all info about form’s & Jquery

outlet
Guest
outlet

Thank you a lot for giving everyone remarkably breathtaking opportunity to read from this website. It really is very nice and also packed with a good time for me personally and my office colleagues to visit your site not less than 3 times in 7 days to read through the new guides you have got. And indeed, I’m just at all times happy with your eye-popping strategies you serve. Some 4 tips in this posting are truly the most impressive we have all had.

adel
Guest
adel

thank yooooooooooooooou, :)

trackback
jQuery form, 100 Best plugins, tools & tutorials « Zeeshan Akhter

[…] jQuery Form Selectors Example […]

trackback
10 forms based on jQuery scripts and plug-ins to enhance - Open News

[…] Source / Demo […]

trackback
10 jQuery Form – Accessibility and Functionality | jQuery4u

[…] Source Demo […]

trackback
jQuery forms, 100 best

[…] jQuery Form Selectors Example […]

Virendra Dugar
Guest
Virendra Dugar

Good Article.

Found another interesting article that explains how to use selectors with different examples.

http://jquerybyexample.blogspot.com/2011/05/jquery-selectors-examples.html

cihip
Guest
cihip

jQuery form selectors example post for thanx.

trackback
jQuery Tutorials

[…] Form selectors examples jQuery selectors for form elements : TextBox, Password, Textarea, Radio Buttons, Check Box, Upload File, Hidden value, Select(dropdown box), Submit button and Reset button. […]