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. Here're some most important form events and their event handler.

The Focus Event (onfocus)

This event occurs when an element gets focused on a web page. The onfocus event handler is used to handle this event.
The following example will highlight the background of text input in green color when it receives the focus.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Handling the Focus Event </title>
</head>
<body>
<script>
function highlightInput(elm){
elm.style.background = "lightgreen";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
</body>
</html>

Output

JavaScript Handling the Focus Event

Note : The value of this keyword inside an event handler refers to the element which has the handler on it.

The Blur Event (onblur)

This event occurs when the user takes the focus away from a form element. The onblur event handler is used to handle this event.
The following example will show you an alert message when the text input element loses focus.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnBlur Event </title>
</head>
<body>
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>
</body>
</html>

Output

JavaScript Handling the Blur Event

Note: First click inside the text input box then click outside to see how it works.

The Change Event (onchange)

This event occurs when the value of a form element is changed. The onchange event handler is used to handle this event.
This example will show you an alert message when you change the option in the select box.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnChange Event </title>
</head>
<body>
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>OnePlus</option>
<option>Samsung</option>
</select>
<p><strong>Note:</strong> Select any option in select box to see how it works.</p>
</body>
</html>

Output

JavaScript OnChange Event

Note: Select any option in select box to see how it works.

The Submit Event (onsubmit)

The submit event occurs when the submit button is clicked. The onsubmit event handler is used to handle this event.
The following example will show you an alert message while submitting the form to the server.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnSubmit Event </title>
</head>
<body>
<form action="../index.php" method="post" onsubmit="alert('Form data will be submitted to
the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output

JavaScript OnSubmit Event

Recommended :

1 . Types of Operators in JavaScript
2 . Use events in Forms using JavaScript
3 . Role of Numbers in JavaScript
4 . JavaScript Math

5 . Create Cookie in JavaScript
6 . Dialog Boxes
7 . BootStrap 4 Photography Snippets
8 . BootStrap 4 Photography Snippets

Topics

BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors