Home Asp.net Disable Submit Button Once Form Is Submitted Using jQuery

Disable Submit Button Once Form Is Submitted Using jQuery

18
0
Redirect Page on Button Click

If you want to prevent form submission more than one time after form is submitted, you must need to disable submit button once it’s clicked.

To restrict users to click submit button again and again, we can use the following jquery to disable submit button.

Your Form Declaration

Following is the HTML Markup code for form with submit button:

<form id="form1" runat="server">
    <input type="submit" id="btnSubmit" value="Submit" />
</form>

Disable Submit Button Using jQuery Solution

Following is jQuery function to prevernt form submission once input button clicked to submit form:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input#btnSubmit').on('click', function () {
            var myForm = $("form#form1");
            if (myForm) {
                $(this).prop('disabled', true);
                $(myForm).submit();
            }
        });
    });
</script>

HTML Markup

Following is the complete HTML markup for your .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Disable Submit Button To Prevent Form Submission Using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input#btnSubmit').on('click', function () {
                var myForm = $("form#form1");
                if (myForm) {
                    $(this).prop('disabled', true);
                    $(myForm).submit();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="submit" id="btnSubmit" value="Submit" />
    </form>
</body>
</html>

As you can see from above code, I used $(this).prop(‘disabled’, true);

Previous articleSet Asp.net DropDownList Selected Value in JavaScript
Next articleFormat JSON Date String To Local DataTime Object Using JavaScript
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three × 5 =