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;
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);
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");
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>
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!
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.
This is one place to get all info about form’s & Jquery
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.
thank yooooooooooooooou, 🙂
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
jQuery form selectors example post for thanx.