What is the JavaScript onsubmit Event

JavaScript offers the “form” event handler that occurs when the user interacts with the form present on the website. These form events include “onfocus”, “onblur”, “onreset”, “onsubmit” and many others. The “onsubmit” is one of the significant form events that is used in forms. It fires immediately when the user tries to submit any input text field. It helps in submitting the user input as well as the hidden elements that require validation before the request is submitted to the server.

This post explains the objective, working, and usage of the “onsubmit” event in JavaScript.

What is the JavaScript “onsubmit” Event?

The “onsubmit” event triggers when the form submits or when the “submit” button clicks. It invokes the associated JavaScript function to perform the defined task upon the event trigger.

Syntax

element.onsubmit = function(){myScript};

In the above syntax:

element: It represents the HTML element.
function(): It refers to the function that needs to be invoked upon the event trigger.
myScript: It corresponds to the function definition to perform the specific task when the “onsubmit” event occurs.

Syntax(With “addEventListener()” Method)

object.addEventListener("submit", myScript);

In this syntax, the “addEventListener()” method attaches the “submit” event to execute the JavaScript function.

How Does “onsubmit” Event Work in JavaScript?

The “onsubmit” event works with the JavaScript function such that it returns its functionalities when the event triggers. It can be applied in different ways in the JavaScript function to perform various tasks.

HTML Code

First, an overview of the following HTML code:

<h2 style="color:green">HTML onsubmit Event</h2>

<form id="formID">

Enter name:

<input type="text"><button>Submit</button>

</form>

In the above lines of code:

The “<h2>” tag defines the subheading styled with the stated color.
After that, the “<form>” tag is associated with id “formID” representing the input field of the content type as “text”.
Also, a button is created to submit the form.

Note: The above-written HTML code is followed throughout the whole article.

Example 1: Applying the “onsubmit” Event to Display the Alert Box Based on Basic Syntax

This example displays the alert box upon triggering the “onsubmit” event with the help of a user-defined JavaScript function.

JavaScript Code

The JavaScript code is written below:

In this code block:

The “document.getElementById()” method accesses the form via its id “formID” and associates the “onsubmit” event with the function named “demo()”.
After that, the function “demo()” is declared to display the “alert” box when the “onsubmit” event triggers.

Output

This output indicates that when the “onsubmit” event occurs upon button click, the alert box pops up displaying the stated message.

Example 2: Applying the “onsubmit” Event Based to Display Alert Box Based on the “addEventListener()” Method Syntax

This example utilizes the “onsubmit” event with the “addEventListener()” method to display an alert box upon the event trigger.

JavaScript Code

Consider the following JavaScript code:

The above code applies the “getElementById()” method with the “addEventListener()” method to fetch the form via its id “formID” and passes the “submit” event with the defined “demo” function as its arguments, respectively. After that, likewise, display the stated message via the alert box in the function definition.

Output

As analyzed, the output is identical to the first example (Based on basic syntax).

Conclusion

JavaScript supports the well-reputed “onsubmit” event that is triggered when the associated form is submitted and invokes the corresponding JavaScript function. This post demonstrated the purpose, working, and usage of the “onsubmit” event in JavaScript.

What is the JavaScript onsubmit Event