JavaScript Tutorial
JS Overview
JS Introduction
How To Add JS
JS Output
JS Comments
JS Variable
JS Data Types
JS Operators
JS Events
JS Form Events
JavaScript Statements
JS If Statement
JS Switch
JavaScript Loop
JS for loop
JS while loop
JS do while Loop
JS for..in loop
Function
JS Function
JavaScript Objects
JS Object
JS Array
JS Array Sorting
JS String
JS String Method
JS Number
JS Boolean
JS Date
JS Math
JavaScript BOM
JS Window
JS location
JS History
JS Navigator
JS Screen
JS Dialog Boxes
JavaScript DOM
Document Object
JS Methods
JS innerHTML
JavaScript Validation
JS Form Validation
JavaScript Advanced
JS Cookies
JS Delete Cookies
JS Type Conversions
JS Event Listeners
JS Error Handling
JS Reserved Keywords
Reading Section
Advertisement
Advertisement
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. Theonfocus 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>
<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
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. Theonblur 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>
<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. Theonchange 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>
<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. Theonsubmit 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>
<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
Recommended :
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 »