HTML | DOM onsubmit Event

Last Updated : 20 Jul, 2021

The onsubmit event in HTML DOM occurs after submission of a form. The form tag supports this event.
Supported HTML Tags:

<form>

Syntax:

In HTML:

<element onsubmit="Script">

In JavaScript:

object.onsubmit = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("submit", myScript);

Example: Using JavaScript

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      HTML DOM onsubmit Event
  </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onsubmit Event</h2>
        <form id="formID" action="#">
            Enter name:
            <input type="text" name="fname">
            <input type="submit" value="Submit">
        </form>
    </center>
   
    <script>
        document.getElementById("formID").onsubmit =
            function() {GFGfun()};
 
        function GFGfun() {
            alert("form submitted");
        }
    </script>
 
</body>
 
</html>

Output:
Before:

After:

Example: Using the addEventListener() method

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      HTML DOM onsubmit Event
  </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onsubmit Event</h2>
        <form id="formID" action="#">
            Enter name:
            <input type="text" name="fname">
            <input type="submit" value="Submit">
        </form>
    </center>
   
    <script>
        document.getElementById(
          "FormID").addEventListener("submit", GFGfun);
 
        function GFGfun() {
            alert("form submitted");
        }
    </script>
 
</body>
 
</html>