Disable /Avoid / Prevent / double click on Submit button using JavaScript and jQuery.

Introduction

This explains how to avoid / prevent / disable double click on Submit button using JavaScript and jQuery.
When user double clicks any Button, it results in duplicate operations and hence to avoid such behavior as soon as the Submit Button is clicked, it is disabled using JavaScript or jQuery to avoid / prevent / disable double click on Submit button using JavaScript and jQuery.

Using JavaScript

 The following HTML Markup consists of an HTML Button and an HTML Submit Button.
When a form is submitted, the window onbeforeunload event handler is executed. 
Inside the window onbeforeunload event handler, all the HTML INPUT elements are fetched and if the Type attribute has value button or submit then it is disabled using JavaScript.

<input type="button" id="Button1" value="Button" onclick="document.forms[0].submit()" />
<input type="submit" id="Submit1" value="Submit Button" />
<script type="text/javascript">
    window.onbeforeunload = function () {
        var inputs = document.getElementsByTagName("INPUT");
        for (var i in inputs) {
            if (inputs[i].type == "button" || inputs[i].type == "submit") {
                inputs[i].disabled = true;
            }
        }
    };
</script>

Using jQuery

 The following HTML Markup consists of an HTML Button and an HTML Submit Button.
When a form is submitted, the window onbeforeunload event handler is executed. 
Inside the window onbeforeunload event handler, the HTML Input Button and HTML Submit button are selected using jQuery and the disabled attribute is set. 

<input type="button" id="Button1" value="Button" onclick="document.forms[0].submit()" />
<input type="submit" id="Submit1" value="Submit Button" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    window.onbeforeunload = function () {
        $("input[type=button], input[type=submit]").attr("disabled", "disabled");
    };
</script>
 
Ashwani
Ashwani

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

No comments:

Post a Comment