Form Events

Events are things that happen to objects, such as the clicking of a command button or the opening and closing of a form, etc. These events trigger an action to be carried out. The HTMLFormElement interface represents a form element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements. The form events are the same standard JavaScript events , but with added support by jQuery . A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any option in a select box etc.
  1. submit
  2. select
  3. change
  4. focus
  5. blur

blur() event

The blur event is triggered when the element loses focus. This event is commonly used with input elements, but can be used with other HTML elements . An element can lose focus when the mouse is clicked outside of the element or through keyboard commands, such as, tabbing out of an input element.
$("#txtInput").blur(function () { alert("Control lost focus"); });
<input name="name" id="txtInput" type="text" />
run this source code Browser View
Full Source
<html> <head> <title>jQuery blur</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#txtInput").blur(function () { alert("Control lost focus"); }); }); </script> </head> <body> <input name="name" id="txtInput" type="text" /> </body> </html>

submit() event

The submit event is one of the more popular form elements (right behind the change event). The method submit() attaches an event handler that executes a function when the submit event occurs or triggers the event. This event occurs whenever a form is submitted .
$("#myForm").submit(function () { alert("Form submitted"); });
<form id="myForm"> <input name="submit" id="submit" type="submit" /> </form>
run this source code Browser View
Full Source
<html> <head> <title>jQuery Submit</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myForm").submit(function () { alert("Form submitted"); }); }); </script> </head> <body> <form id="myForm"> <input name="submit" id="submit" type="submit" /> </form> </body> </html

select() event

The jQuery method of select() corresponds to select event, it is triggered when the user selects the element value.
$("#text").select(function () { alert("Text selected"); });
<input name="text" id="text" type="text" size="30"/>
run this source code Browser View
Full Source
<html> <head> <title>jQuery Select</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#text").select(function () { alert("Text selected"); }); }); </script> </head> <body> <input name="text" id="text" type="text" size="30" value="Select this text"/> </body> </html>

change() Method

The change() Method fire when an element value is changed.
$("select").change(function(){ var selectedColor = $(this).find(":selected").val(); alert("You selected - " + selectedColor); });
<select> <option>Red</option> <option>Blue</option> <option>Green</option> </select>
run this source code Browser View
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ var selectedColor = $(this).find(":selected").val(); alert("You have selected - " + selectedColor); }); }); </script> </head> <body> <select> <option>Red</option> <option>Blue</option> <option>Green</option> </select> </body> </html>

focus()

The focus() method can either trigger the focus event or attach a function to run when the focus event is triggered.
$("input").focus(function(){ $(this).css('background-color', 'pink'); });
Enter: <input type="text" size="30"/>
run this source code Browser View
Enter:
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).css('background-color', 'pink'); }); }); </script> </head> <body> Enter: <input type="text" size="30"/> </body> </html>