jQuery comes with five common form events to handle the form elements’ action.
1. focus()
Fire when an element is on focus.
$("input,select,textarea").focus(function () {
//do something
});
2. blur()
Fire when an element is loses focus.
$("input,select,textarea").blur(function () {
//do something
});
3. change()
Fire when an element value is changed, e.g update checkbox, radio button or textbox value.
$("input,select,textarea").change(function () {
//do something
});
4. select()
Fire when highlight the text inside the element, limited to textbox or textarea only.
$("input,textarea").focus(function () {
//do something
});
5. submit()
Fire when attempting to submit a form, bind to form element only.
$("form").focus(function () {
//do something
});
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:16px;
}
.focus, .blur, .change, .select{
color:white;
border:1px solid red;
background-color:blue;
padding:8px;
margin:8px;
}
</style>
</head>
<body>
<h1>jQuery form events - focus(), change(), blur(), select(), submit() example</h1>
<form name="testing" action="#">
<div>
TextBox : <input type="textbox" size="50"></input>
</div>
<div>
<label style="float:left">TextArea : </label>
<textarea cols="30" rows="5"></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>
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>
<script type="text/javascript">
$("input,select,textarea").focus(function () {
$(this).after("<span class='focus'> focus() triggered! </span>");
$("span").filter('.focus').fadeOut(4000);
});
$("input,select,textarea").blur(function () {
$(this).after("<span class='blur'> blur() triggered! </span>");
$("span").filter('.blur').fadeOut(4000);
});
$("input,select,textarea").change(function () {
$(this).after("<span class='change'> change() triggered! </span>");
$("span").filter('.change').fadeOut(4000);
});
$("input,textarea").select(function () {
$(this).after("<span class='select'> select() triggered! </span>");
$("span").filter('.select').fadeOut(4000);
});
$("form").submit(function () {
alert('Form submitted!');
});
</script>
</body>
</html>
very nice post!!!
This is really nice article. I have query here, suppose I want to put validation on some selected textbox or dropdown then what should I do ?
Thank you vey much for all your posts. They are extremely helpful and easy to understand.
I think possibilites 4 and have should be changed to select and submit respectively…
HI,
Thanks to share this.