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

You are here: Reference > JavaScript > client-side > event handling > methods > submit (form)

submit method (form)

Browser support:

Submits the data placed in the current form element.

This method has the same effect as clicking on a submit button of the current form except that the call to the submit method does not fire the onsubmit event. The submit method is useful if you need a custom submit button.

Syntax:

object.submit ( );

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

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the submit method:

<head>
    <script type="text/javascript">
        function Submit (form) {
            form.submit ();
        }
    </script>
</head>
<body>
    <form>
        Name: <input type="text" name="name" size="20" /><br />
        Address: <input type="text" name="address" size="20" /><br />
        <br />
        <button onclick="Submit (form)">Submit the form</button>
    </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);
?>