How to Call a JavaScript Function from an onsubmit Event ? Last Updated : 26 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 from an onsubmit event: Table of Content Using onsubmit event attributeUsing the addEventListener() method Using onsubmit event attributeThe onsubmit event can be used to call a function by passing the callback function as a value to the onsubmit attribute in HTML. It will call the passed function once the form is submitted. Syntax:<HTMLElement onsubmit = "CallbackFn()"> // Element content</HTMLElement>Example: The below code will explain how the onsubmit event can be used as an attribute to call a function. HTML <!DOCTYPE html> <html> <head> <title>GFG</title> </head> <body style="text-align: center;"> <h2> How to call a JavaScript function <br/>from an onsubmit event? </h2> <form onsubmit="Geeks()"> <label for="firstName"> First Name: </label> <input id="firstName" type="text" value="" required/> <br /><br/> <label for="lastName"> Last Name: </label> <input id="lastName" type="text" value="" required/> <br /><br/> <input type="submit" value="Submit" /> </form> <script> function Geeks() { alert("Form submitted!!"); } </script> </body> </html> Output: Using the addEventListener() method In this approach, the addEventListener() method is used to attach an event to a HTML element and call a callback function once the form is submitted. Syntax:selectedHTMLElement.addEventListener('submit', callbackFn);Example: The below code will illustrate the use of addEventListener() method to call a function using onsubmit event. HTML <!DOCTYPE html> <html> <head> <title>GFG</title> </head> <body style="text-align: center;"> <h2> How to call a JavaScript function <br />from an onsubmit event? </h2> <form id="formID"> <label for="firstName"> First Name: </label> <input id="firstName" type="text" value="" required /> <br /><br /> <label for="lastName"> Last Name: </label> <input id="lastName" type="text" value="" required /> <br /><br /> <input type="submit" value="Submit" /> </form> <script> document.getElementById("formID"). addEventListener("submit", GFGfun); function GFGfun() { alert("form submitted!!"); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Call a JavaScript Function from Chrome Console ? A abhiisaxena09 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads 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 using an onsubmit Event ? 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 u 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 a JavaScript Function from Chrome Console ? One can call a JavaScript Function from the Chrome Console. We will learn how can we call the function in the console that is written in JavaScript. Steps to call a JavaScript Function from Chrome ConsoleOpen the Chrome ConsoleYou can open the Chrome Console by right-clicking on your webpage, select 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 How to submit a form by clicking a link in JavaScript ? Submitting a form by clicking a link in JavaScript involves binding a click event handler to the link element. When clicked, the handler triggers the form's submit action programmatically, allowing form submission without the need for a traditional submit button. ApproachHTML Structure:Basic HTML st 2 min read Like