jQuery Form Events
html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn jquery</title>
<style>
body{ font-family: arial; }
#box{
background: pink;
padding:10px;
border:1px solid #000;
}
</style>
</head>
<body>
<h1>Form Events</h1>
<form action="" id="sform">
<label for="">Name</label><input type="name" id="sname"><br><br>
<label for="">class</label><input type="text" id="sclass"><br><br>
<label for="">Country</label>
<select id="scountry">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Nepal">Nepal</option>
</select><br><br>
<input type="submit">
</form>
<div id="test" style="border:1px solid red;margin-top:20px;"></div>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/events.js"></script>
</body>
</html>
events.js
$(document).ready(function(){
/* Jquery Form Focus Event */
$('#sname,#sclass,#scountry').focus(function(){
$(this).css('background-color','lime');
});
/* Jquery Form Blur Event */
$('#sname,#sclass,#scountry').blur(function(){
$(this).css('background-color','');
});
/* Jquery Form Change Event */
$('#scountry').change(function(){
//$(this).css('background-color','pink');
var a = $(this).val();
$('#test').html(a);
});
/* Jquery Form Select Event */
$('#sname,#sclass').select(function(){
$(this).css('background-color','yellow');
});
/*Jquery Form submit Event*/
$('#sform').submit(function(){
alert("Form Submitted");
});
});