JavaScript Form Event
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.
<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
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.
<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
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.
<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
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.
<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
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »