In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onsubmit

onsubmit event | submit event

Browser support:

Occurs on a form element when the user clicks on a submit button in the form.

The onsubmit event is commonly used to validate the contents of form controls and set the contents of some input:hidden elements before submitting. If the user forgot to fill some required fields or made some other mistake on the form, you can cancel the submission with the onsubmit event. See the example below for details.

How to register:

In HTML:

In JavaScript:

object.onsubmit = handler;

object.addEventListener ("submit", handler, useCapture);

9

object.attachEvent ("onsubmit", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	Yes
Event object	Event

Actions that invoke the onsubmit event:

Clicking on a submit button button (or a button with type="submit") in a form.

Actions that do not invoke the onsubmit event:

Invoking the submit method of a form.

Example HTML code 1:

This example illustrates the use of the onsubmit event:

<head>
    <script type="text/javascript">
        function CheckAndSubmit () {
            var userName = document.getElementById ("userName");
            if (userName.value.length < 3) {
                alert ("The name of the user must be at least 3 characters long!");
                return false;
            }

            var password = document.getElementById ("password");
            var repassword = document.getElementById ("repassword");
            if (password.value.length < 6) {
                alert ("The password must be at least 6 characters long!");
                return false;
            }
            if (repassword.value != password.value) {
                alert ("The two passwords are different!");
                return false;
            }

            var acceptAgreement = document.getElementById ("acceptAgreement");
            if (!acceptAgreement.checked) {
                alert ("You must accept the User Agreement to register!");
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <form id="regForm" method="post" action="#URL#" onsubmit="return CheckAndSubmit ()">
        User Name: <input type="text" name="userName" id="userName" />
        <br />
        Password: <input type="password" name="password" id="password" />
        <br />
        Repeat Password: <input type="password" name="repassword" id="repassword" />
        <br /><br />
        <input type="checkbox" name="acceptAgreement" id="acceptAgreement" /> 
        <label for="acceptAgreement">I accept the User Agreement and Privacy Policy</label>
        <br /><br />
        <input type="submit" value="Register" />
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example and the next one use AJAX to submit a form without reloading the page. The two examples are similar, but the first one uses synchronous while the second one uses asynchronous data transfer. In synchronous mode, the send method of the XMLHttpRequest object waits for a reply, so the user cannot interact with the browser until the response has completed. In asynchronous mode, the send method does not wait for a reply but instead returns immediately, so it allows you to perform other operations while a time-consuming task is being performed in the background.

Code

ajax_form.js

<head>
    <script type="text/javascript" src="ajax_form.js"></script>
    <style>
        .error {
            display: none;
            color: #a00000;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">     
        function HideAllErrorFields () {
            for (var i = 1; i <= 4; i++) {
                var field = document.getElementById ("error" + i);
                field.style.display = "none";
            }
        }

        function ShowErrorFields (idsStr) {
            var ids = idsStr.split (",");
            for (var i = 0; i < ids.length; i++) {
                var field = document.getElementById ("error" + ids[i]);
                if (field) {
                    field.style.display = "block";
                }
            }
        }

        function AjaxSend (form, url, method) {
                // hide all error fields
            HideAllErrorFields ();
            
                // get message data
            var data = GetMessageBody (form);   // defined in ajax_form.js

                // send the request
            var httpRequest = CreateRequestObj ();  // defined in ajax_form.js
                // try..catch is required if working offline
            try {
                httpRequest.open (method, url, false);  // synchron
                httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                httpRequest.send (data);
            }
            catch (e) {
                alert ("Cannot connect to the server!");
                return;
            }

                // handle the response
            if (IsRequestSuccessful (httpRequest)) {    // defined in ajax_form.js
                if (httpRequest.responseText === "ok") {    // registration is successful
                    alert ("Thank you for registering");
                    /*
                        // if redirection is required
                    location.href = "/index.php";
                    */
                }
                else {  // some fields are invalid
                    ShowErrorFields (httpRequest.responseText);
                }
            }
            else {
                alert ("An error occurred while registering. Please try it again.");
            }
        }
    </script>
</head>
<body>
    This is a sample registration form.
    The username must be between 2 and 20 characters, the password must be between 6 and 20 characters.
    A user named Dottoro is already registered.
    <br />
    Try to register both valid and invalid values!
    <br /><br />
    <form onsubmit="AjaxSend (this, 'register.php', 'post'); return false;">
        User Name: <input type="text" name="userName" />
        <div class="error" id="error1">Must be between 2 and 20 characters.</div>
        <div class="error" id="error2">A user already exists with the same name.</div>
        <br /><br />
        Password: <input type="password" name="password" />
        <div class="error" id="error3">Must be between 6 and 20 characters.</div>
        <br /><br />
        Repeat Password: <input type="password" name="repassword" />
        <div class="error" id="error4">Must be the same as the password.</div>
        <br /><br />
        <input type="submit" value="Register" />
    </form>
</body>


function CreateRequestObj () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}

    // create HTTP request body form form data
function GetMessageBody (form) {
    var data = "";
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        if (elem.name) {
            var nodeName = elem.nodeName.toLowerCase ();
            var type = elem.type ? elem.type.toLowerCase () : "";

                // if an input:checked or input:radio is not checked, skip it
            if (nodeName === "input" && (type === "checkbox" || type === "radio")) {
                if (!elem.checked) {
                    continue;
                }
            }

            var param = "";
                // select element is special, if no value is specified the text must be sent
            if (nodeName === "select") {
                for (var j = 0; j < elem.options.length; j++) {
                    var option = elem.options[j];
                    if (option.selected) {
                        var valueAttr = option.getAttributeNode ("value");
                        var value = (valueAttr && valueAttr.specified) ? option.value : option.text;
                        if (param != "") {
                            param += "&";
                        }
                        param += encodeURIComponent (elem.name) + "=" + encodeURIComponent (value);
                    }
                }
            }
            else {
                param = encodeURIComponent (elem.name) + "=" + encodeURIComponent (elem.value);
            }

            if (data != "") {
                data += "&";
            }
            data += param;                  
        }
    }
    return data;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

<?php

define("ERR_INVALID_USERNAME", "1");
define("ERR_EXISTING_USERNAME", "2");
define("ERR_INVALID_PASSWORD", "3");
define("ERR_DIFFERENT_PASSWORDS", "4");

$errors = array ();

if (isset ($_POST["userName"])) {
    $username = $_POST["userName"];
    $len = strlen ($username);
    if ($len < 2 || $len > 20) {
        array_push ($errors, ERR_INVALID_USERNAME);
    }
    else {
            // check the name of registered users
        if (strcasecmp ($username, "Dottoro") == 0) {
            array_push ($errors, ERR_EXISTING_USERNAME);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_USERNAME);
}

if (isset ($_POST["password"])) {
    $password = $_POST["password"];
    $len = strlen ($password);
    if ($len < 6 || $len > 20) {
        array_push ($errors, ERR_INVALID_PASSWORD);
    }
    else {
        if (!isset ($_POST["repassword"]) || strcmp ($password, $_POST["repassword"]) != 0) {
            array_push ($errors, ERR_DIFFERENT_PASSWORDS);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_PASSWORD);
}

$response = "";
if (sizeof ($errors) > 0) {
    $response = implode (",", $errors);
}
else {
        // some db operations, save username and password ...
    
    $response = "ok";
}

echo ($response);
?>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example is similar to the previous one, but it uses asynchronous data transfer and displays blinking text while waiting for the server response (the register_delay.php script waits two seconds before responding).

Code

ajax_form.js

register_delay.php

<head>
    <script type="text/javascript" src="ajax_form.js"></script>
    <style>
        .error {
            display: none;
            color: #a00000;
            font-weight: bold;
        }
        #progress {
            visibility: hidden;
            color: #00a000;
        }
    </style>
    <script type="text/javascript">     
        function HideAllErrorFields () {
            for (var i = 1; i <= 4; i++) {
                var field = document.getElementById ("error" + i);
                field.style.display = "none";
            }
        }

        function ShowErrorFields (idsStr) {
            var ids = idsStr.split (",");
            for (var i = 0; i < ids.length; i++) {
                var field = document.getElementById ("error" + ids[i]);
                if (field) {
                    field.style.display = "block";
                }
            }
        }

        var registering = false;
        
        function OnReadyStateChanged (httpRequest, form) {
            if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
                
                registering = false;
                StopAnim ();
                
                    // prevent memory leaks
                httpRequest.onreadystatechange = null;
                
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax_form.js
                    if (httpRequest.responseText === "ok") {    // registration is successful
                        alert ("Thank you for registering");
                        /*
                            // if redirection is required
                        location.href = "/index.php";
                        */
                    }
                    else {  // some fields are invalid
                        ShowErrorFields (httpRequest.responseText);
                    }
                }
                else {
                    alert ("An error occurred while registering. Please try it again.");
                }
            }
        }

        function AjaxSend (form, url, method) {
                // avoid resend data while registering
            if (registering) {
                return;
            }
                // hide all error fields
            HideAllErrorFields ();
            
                // get message data
            var data = GetMessageBody (form);   // defined in ajax_form.js

                // send the request
            var httpRequest = CreateRequestObj ();  // defined in ajax_form.js
                // try..catch is required if working offline
            try {
                httpRequest.open (method, url, true);   // asynchron
                httpRequest.onreadystatechange = function () {OnReadyStateChanged (httpRequest, form)};
                httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                httpRequest.send (data);
            }
            catch (e) {
                alert ("Cannot connect to the server!");
                return;
            }

            registering = true;
            StartAnim ();
        }

            // blinking text
        var animTimerId = 0;
        function StartAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = "visible";
            animTimerId = setInterval (RegAnim, 100);
        }
        function RegAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = (progress.style.visibility == "visible") ? "hidden" : "visible";
        }
        function StopAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = "hidden";
            clearInterval (animTimerId);
        }

    </script>
</head>
<body>
    This is a sample registration form.
    The username must be between 2 and 20 characters, the password must be between 6 and 20 characters.
    A user named Dottoro is already registered.
    <br />
    Try to register both valid and invalid values!
    <br /><br />
    <form onsubmit="AjaxSend (this, 'register_delay.php', 'post'); return false;">
        User Name: <input type="text" name="userName" />
        <div class="error" id="error1">Must be between 2 and 20 characters.</div>
        <div class="error" id="error2">A user already exists with the same name.</div>
        <br /><br />
        Password: <input type="password" name="password" />
        <div class="error" id="error3">Must be between 6 and 20 characters.</div>
        <br /><br />
        Repeat Password: <input type="password" name="repassword" />
        <div class="error" id="error4">Must be the same as the password.</div>
        <br /><br />
        <input type="submit" value="Register" />
        <div id="progress">Registering</div>
    </form>
</body>


function CreateRequestObj () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}

    // create HTTP request body form form data
function GetMessageBody (form) {
    var data = "";
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        if (elem.name) {
            var nodeName = elem.nodeName.toLowerCase ();
            var type = elem.type ? elem.type.toLowerCase () : "";

                // if an input:checked or input:radio is not checked, skip it
            if (nodeName === "input" && (type === "checkbox" || type === "radio")) {
                if (!elem.checked) {
                    continue;
                }
            }

            var param = "";
                // select element is special, if no value is specified the text must be sent
            if (nodeName === "select") {
                for (var j = 0; j < elem.options.length; j++) {
                    var option = elem.options[j];
                    if (option.selected) {
                        var valueAttr = option.getAttributeNode ("value");
                        var value = (valueAttr && valueAttr.specified) ? option.value : option.text;
                        if (param != "") {
                            param += "&";
                        }
                        param += encodeURIComponent (elem.name) + "=" + encodeURIComponent (value);
                    }
                }
            }
            else {
                param = encodeURIComponent (elem.name) + "=" + encodeURIComponent (elem.value);
            }

            if (data != "") {
                data += "&";
            }
            data += param;                  
        }
    }
    return data;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

<?php

define("ERR_INVALID_USERNAME", "1");
define("ERR_EXISTING_USERNAME", "2");
define("ERR_INVALID_PASSWORD", "3");
define("ERR_DIFFERENT_PASSWORDS", "4");

$errors = array ();

if (isset ($_POST["userName"])) {
    $username = $_POST["userName"];
    $len = strlen ($username);
    if ($len < 2 || $len > 20) {
        array_push ($errors, ERR_INVALID_USERNAME);
    }
    else {
            // check the name of registered users
        if (strcasecmp ($username, "Dottoro") == 0) {
            array_push ($errors, ERR_EXISTING_USERNAME);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_USERNAME);
}

if (isset ($_POST["password"])) {
    $password = $_POST["password"];
    $len = strlen ($password);
    if ($len < 6 || $len > 20) {
        array_push ($errors, ERR_INVALID_PASSWORD);
    }
    else {
        if (!isset ($_POST["repassword"]) || strcmp ($password, $_POST["repassword"]) != 0) {
            array_push ($errors, ERR_DIFFERENT_PASSWORDS);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_PASSWORD);
}

$response = "";
if (sizeof ($errors) > 0) {
    $response = implode (",", $errors);
}
else {
        // some db operations, save username and password ...
    
    $response = "ok";
}
    // 2 secs delay
sleep (2);

echo ($response);
?>