Main Tutorials

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 Author

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

Subscribe
Notify of
7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Muneo
12 years ago

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!

NTTdocomo
3 years ago

It’s good to read your script. How can I manage if there’s two or more TextBox in the form? e.g. Can I add a static text after the textbox1, another static text after textbox2. Besides, set width for each each textbox individually.

Mithun Pattankar
10 years ago

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

outlet
10 years ago

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
11 years ago

thank yooooooooooooooou, 🙂

Virendra Dugar
12 years ago

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
13 years ago

jQuery form selectors example post for thanx.