Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Thursday, 23 April 2015

Introduction:

In this article I will explain how to disable submit button after click or submit. When the Submit button is clicked, the JavaScript “onbeforeunload” event handler is triggered.

Following Javascript method is used to disable submit button:

Inside the JavaScript onbeforeunload event handler, a loop is executed over all HTML Input elements and the HTML Input elements of type button or submit are disabled.

 <script type="text/javascript">
        window.onbeforeunload = function () {
            var inputs = document.getElementsByTagName("INPUT");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "button" || inputs[i].type == "submit") {
                    inputs[i].disabled = true;
                }
            }
        };
    </script>

Full Source code for Sample Application:



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="http://www. maziksolutions.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript">
        window.onbeforeunload = function () {
            var inputs = document.getElementsByTagName("INPUT");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "button" || inputs[i].type == "submit") {
                    inputs[i].disabled = true;
                }
            }
        };
    </script>
    </form>
</body>
</html>


Disable Submit button after click using jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="http://www.maziksolutions.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).on('beforeunload'function () {
            $("input[type=submit], input[type=button]").prop("disabled""disabled");
        });
    </script>
    </form>
</body>

</html>

0 comments:

Post a Comment