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, or befriend him on Facebook or Google Plus. 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. […]