Updated April 1, 2023
Introduction to JavaScript Form Events
A form event in JavaScript gets triggered when a user loses focus, or in a sense, the user wants to make modifications to the form control value. Modification of the value includes a selection of any check box of the form, making modifications on the opened form which has lost its focus or changing the typed text etc. All these events, which gets defined inside a form and can act as an event for the user, acts as JavaScript Form Events. Overall when the user changes on the form and the events associated constitutes JavaScript Form Events as successful.
Various Form Events in JavaScript
There are various form events in JavaScript which works with respect to the scenarios and events which user can create once focus is apart from the actual focus control view:
1. OnBlur
This is an event which arises when a user leaves an empty input field and do not even try to create or type any extra text on the form.
Example: This program illustrates the Onblur Form Event in JavaScript, where the user leaves the input field as empty and then tries to give output as shown.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function Functa() {
var p = document.getElementById("fnm");
p.value = p.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fnm" onblur="Functa()">
<p>when the function a is triggered then the input text gets converted into upper case</p>
</body>
</html>Output:
2. OnChange
This is an event which arises when a user tries to open the form and does not type or enter any text into the form, and then the user leaves the field as empty. Also, the user tries to select the value from a dropdown list as entitled in the form.
Example: This program illustrates the Onchange Form Event in JavaScript where the user leaves the input field as empty and then tries to give select one of the field values from the dropdown, and then after selection, it gets ready for the listed values.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function prefrrdsubjects() {
prefer = document.forms[0].browsers.value;
alert("subjects which are most liked and preferred " + prefer);
}
</script>
</head>
<body>
<form>
Choose which subject you like and will prefer:
<select id="subjects" onchange="liked&preferred()">
<option value="Chemistry">Chemistry</option>
<option value="Physics">Physics</option>
<option value="Maths">Maths</option>
</select>
</form>
</body>
</html>Output:
3. OnFocus
This is a special event which behaves in a way that when a user is willing to highlight or turn the focus on some event by highlighting the background of the text or the text as an input to it.
Example 3 : This program illustrates the Onfocus Form Event in JavaScript where the user leaves the input field as empty and then tries to select and click the button, which is an event performed by the user to highlight the important text which is written in the highlighted text by the user as shown in the output of the given program .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Event for focusing the JavaScript element </title>
</head>
<body>
<script>
function highlightInput(em1){
em1.style.background = "red";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
</body>
</html>Output:
4. OnSelect
This is a form event in JavaScript where the user tries to put some text as an input to the text field and then displays it to perform further action on the form.
Example: This program illustrates the form event of selecting the text and then submitting it to the final value.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function function5th() {
document.getElementById("demo1").innerHTML = "select text to display";
}
</script>
</head>
<body>
Display text: <input type="text" value="Welcome Educba!" onselect="Function5th()">
<p id="demo1"></p>
</body>
</html>Output:
5. OnSubmit
This is a form event in which the user tries to make some input by putting text on the form event, and then it selects that file which asks the user to give some text as an input which on submitting as a form event can perform further action like referring to the next page or moving on to the next segment.
Example: This program illustrates the form event of selecting the text and then submitting it to the final value.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function Input_a() {
fnm = document.forms[0].fnm.value;
alert("Hi " + fnm + "! This Page will get redirected to www.educba.com");
}
</script>
</head>
<body>
<form onsubmit="Input_a()" action="https://www.educba.com/">
Enter your name: <input id="fnm" type="text" size="20">
<input type="submit">
</form>
</body>
</html>Output:
After clicking on the submit button:
6. OnReset
Onreset is a form event where the user tries to click on the reset button to make the form event appear or the control view to be appearing the same as the previous form, which initially the user was trying to do.
Example: This program illustrates the onreset form event where the user tries to reset the form.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function mess_reset() {
alert("This event is used to trigger the event where user clicks on reset button");
}
</script>
</head>
<body>
<form onreset="mess_reset()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>Output:
After clicking on the Reset button:
7. OnKeyDown
onkeydown is a form event where the user clicks on the form to perform an event where the user presses and holds a down key.
Example: This program illustrates the event where the user presses the keys of onkeyDown.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function Function8() {
alert("press key inside the input field");
}
</script>
</head>
<body>
<p>Function is pressed to keep the key inside the input field when once triggered</p>
<input type="text" onkeydown="Function8()">
</body>
</html>Output:
OnKeyPress:
It also behaves the same as Onkeydown, where the user presses or holds down a key continuously.
8. OnKeyUp
This is an event where the user performs an event of the user releases the key.
Example: This program illustrates the event where the user presses the keys of OnKeyUp.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function Mess_8() {
document.forms[0].SecondI/p.value = document.forms[0].Input.value;
}
</script>
</head>
<body>
<p>This event occurs when a keyboard key is on its way UP.</p>
<form>
Enter your name:
<input type="text" name="Input" onkeyup="writeMessage()" size="20">
<input type="text" name="SecondI/p" size="20">
</form>
</body>
</html>Output:
9. Both OnKeyUp and OnKeyDown
This is also considered as an event where the user has a probability to press both the keys together to get done with the scenario.
Example: This program illustrates the event where the user presses both the keys of OnKeyUp and OnkeyDown together.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function colr(colr) {
document.forms[0].Input.style.background = colr;
}
</script>
</head>
<body>
<form>
Give some message:<br>
<input
type="text"
onkeydown="color('pink')"
onkeyup="color('white')"
name="colr">
</form>
</body>
</html>Output:
Conclusion
The JavaScript form Event is a scenario-based process which depends on the user when the focus of the user gets moved into formatting the input of the text file or the event of clicking the form tab for submitting and resetting of the form.
Recommended Articles
This is a guide to JavaScript Form Events. Here we discuss the Introduction to JavaScript Form Events and its methods along with Examples and Code Implementation. You can also go through our other suggested articles to learn more –
