How to Call a JavaScript Function using an onsubmit Event ?
Last Updated :
10 Apr, 2024
HTML has a form element that is used to get the data from the user and send the data to the server. Before the HTML form sends data to the server, it generates an event called "submit".
This event can be utilized to execute a JavaScript function that can either validate the form data or notify the user of the form submission.
Below are the approaches to call a JavaScript function using an onsubmit event:
Using Inline event handler in HTML
Here in the HTML form we pass the javascript function as string to onsubmit parameter of form. when the form submit's, It will run the function.
Syntax:
<form onsubmit="function( )">
<input type="submit">
</form>
Example: To demonstrate running a javascript function that check name validity and create alert message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>onsubmit Event</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
padding-top: 2rem;
}
h1{
color: #308d46;
}
</style>
</head>
<body>
<form
action="/post"
method="post"
onsubmit="formValidation(event)">
<h1>GFG Form Example</h1>
Enter name: <input type="text" name="firstName">
<input
type="submit"
value="Submit">
</form>
<script>
function formValidation(event) {
event
.preventDefault();
let name = event
.target
.firstName.value
if( name.length == 0){
alert("Enter Valid Name");
return false;
}
alert ("Form Submitted")
}
</script>
</body>
</html>
Output:
Submit form action using Inline event handlerUsing on submit attribute in JavaScript
Instead of assigning the function directly inside the form parameter, we can select the form element using javascript and assign the function to onsubmit parameter from their.
Syntax:
document.getElementById("form").onsubmit = formValidation;Note: Do not add parenthesis during function assignment.
Example: To demonstrate calling a JavaScript function from an onsubmit event using submit attribute in JavaScript
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>onsubmit Event</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
padding-top: 2rem;
}
h1{
color: #308d46;
}
</style>
</head>
<body>
<form id="form" action="/post" method="post">
<h1>GFG Form Example</h1>
Enter name: <input type="text" name="firstName">
<input
type="submit"
value="Submit"
>
</form>
<script>
document
.getElementById("form")
.onsubmit = formValidation;
function formValidation(event) {
event
.preventDefault();
let name = event
.target
.firstName.value
if( name.length == 0){
alert("Enter Valid Name");
return false;
}
alert ("Form Submitted")
}
</script>
</body>
</html>
Output:
Using onsubmit attribute in JavaScriptUsing addEventListener() method in JavaScript
Here instead of assigning function to onsubmit parameter of form, we attach event listener to the form element to listen for submit event.
Syntax:
document.getElementById( "form" ).addEventListener( 'submit', formValidation );
Example:To demonstrate calling a JavaScript function from an onsubmit event using event listner method in JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>onsubmit Event</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
padding-top: 2rem;
}
h1 {
color: #308d46;
}
</style>
</head>
<body>
<form id="form" action="/post" method="post">
<h1>GFG Form Example</h1>
Enter name: <input type="text" name="firstName">
<input type="submit" value="Submit">
</form>
<script>
document
.getElementById("form")
.addEventListener('submit', formValidation);
function formValidation(event) {
event.preventDefault();
let name =
event
.target
.firstName
.value
if (name.length == 0) {
alert("Enter Valid Name");
return false;
}
alert("Form Submitted")
}
</script>
</body>
</html>
Output:
Using addEventListner method in JavaScript
Similar Reads
How to Call a JavaScript Function from an onsubmit Event ? The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function
2 min read
How to Call a JavaScript Function from an onmouseout Event ? The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmou
3 min read
How to call a JavaScript Function from an onmouseover Event ? The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener. Table of Content Usin
2 min read
How to call function from it name stored in a string using JavaScript ? In this article, we will call a function from the string stored in a variable. There are two methods to call a function from a string stored in a variable. Using window object methodUsing eval() method Note: The eval() method is older and is deprecated. Method 1: Using the window object. The window
2 min read
Call multiple JavaScript functions in onclick event Calling multiple JavaScript functions in an onclick event means executing several functions sequentially when a user clicks an element, like a button. This approach allows you to trigger multiple actions or behaviors with a single click, enhancing interactivity and functionality in web applications.
2 min read
How to solve “Submit is not a function†error in JavaScript ? Ever tried to submit a form, by using a JavaScript? But when you tried to submit the form by using JavaScript, you might be getting a “Submit is not a function†error in the code. Well, don’t panic as of yet. This article is being dedicated to solving that problem of yours.So what are we waiting for
3 min read