Main Tutorials

jQuery form events examples

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>

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
5 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Java learner
11 years ago

Thank you vey much for all your posts. They are extremely helpful and easy to understand.

Jayendra kumar
12 years ago

HI,

Thanks to share this.

Rohit Rathod
9 years ago

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 ?

Robert Wildling
11 years ago

I think possibilites 4 and have should be changed to select and submit respectively…

liuzxc
8 years ago

very nice post!!!