Article Categories

Selected Reading

How to call a JavaScript function on submit form?

Javascript Web Development Front End Technology

The onsubmit event occurs when you try to submit a form. You can put your form validation against this event type. The following example shows how to use onsubmit. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data.

Basic Syntax

<form onsubmit="return functionName()">
    <!-- form elements -->
    <input type="submit" value="Submit" />
</form>

Method 1: Using onsubmit Attribute

The most common approach is to use the onsubmit attribute directly in the form tag:

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation Example</title>
</head>
<body>
    <form onsubmit="return validateForm()" action="#" method="POST">
        <label>Name: </label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label>Email: </label>
        <input type="email" id="email" name="email" required><br><br>
        
        <input type="submit" value="Submit">
    </form>

    <script>
        function validateForm() {
            let name = document.getElementById("name").value;
            let email = document.getElementById("email").value;
            
            if (name.length < 3) {
                alert("Name must be at least 3 characters long");
                return false; // Prevent form submission
            }
            
            if (!email.includes("@")) {
                alert("Please enter a valid email address");
                return false; // Prevent form submission
            }
            
            alert("Form submitted successfully!");
            return true; // Allow form submission
        }
    </script>
</body>
</html>

Method 2: Using addEventListener()

A more modern approach using JavaScript event listeners:

<!DOCTYPE html>
<html>
<head>
    <title>Event Listener Example</title>
</head>
<body>
    <form id="myForm" action="#" method="POST">
        <label>Username: </label>
        <input type="text" id="username" name="username" required><br><br>
        
        <label>Password: </label>
        <input type="password" id="password" name="password" required><br><br>
        
        <input type="submit" value="Login">
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            
            if (username.length < 5) {
                alert("Username must be at least 5 characters");
                event.preventDefault(); // Prevent form submission
                return;
            }
            
            if (password.length < 8) {
                alert("Password must be at least 8 characters");
                event.preventDefault(); // Prevent form submission
                return;
            }
            
            alert("Login successful!");
            // Form will submit normally if validation passes
        });
    </script>
</body>
</html>

Key Points

Return false or use event.preventDefault() to stop form submission
Return true allows the form to submit normally
The onsubmit attribute requires return before the function name
Event listeners provide better separation of HTML and JavaScript
Always validate user input before processing form data

Comparison

Method	Pros	Cons
`onsubmit` attribute	Simple, direct	Mixes HTML and JavaScript
`addEventListener()`	Better separation, modern approach	Slightly more code

Conclusion

Both methods effectively call JavaScript functions on form submission. Use onsubmit for simple cases or addEventListener() for better code organization and modern development practices.

mkotla

Updated on: 2026-03-15T22:08:57+05:30

16K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next