jQuery Form Events
When a form control receives or loses focus or when form control value is modified by the user such as by typing text in a text input, select any option in a select box etc. then the form event fires.
To handle the form events here are some methods.
Try Now
Try Now
Try Now
Try Now
1) The change() Method
When the value of an element is changed then the jQuery change event occurs. When the change event occurs then the change () method attaches a function with it to run. This event is only used with <textarea> boxes, <input> elements and <select> elements. Syntax:$(selector).change()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("The text has been changed.");
});
});
</script>
</head>
<body>
<h1>this is the Heading </h1>
Please enter something.<input type="text">
<p>Write anything in the input field and then click outside the field or press enter.</p>
</body>
</html>
2) The focus() Method
The focus() method of jQuery attaches an event handler function to an HTML form field. When the form field gets focus then the function executes. Syntax:$(selector).focus()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#ffffff");
});
$("input").blur(function(){
$(this).css("background-color", "#cccccc?);
});
});
</script>
</head>
<body>
Enter your First Name: <input type="text" name="fullname">
Enter your Password: <input type="text" name="password">
</body>
</html>
3) The blur() Method
jQuery blur() method is used to remove focus from the element. An event handler function is attached to an html element by the blur() method and that function is executed whenever the form field loses focus. Syntax:$(selector).blur()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Enter your First Name: <input type="text" name="firstname">
Enter your Password: <input type="text" name="email">
</body>
</html>
4) The submit() Method
When a form is submitted then the submit event occurs and after occurring the submit event, submit() method triggers the submit event or attaches a function to run. Syntax:$(selector).submit()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
Enter your Name: <input type="text" name="name">
Enter your Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>