How do I prevent users clicking a button twice?

I have an old ASP.NET web forms application (.NET 2.0) that has a process that takes 30 seconds or so to run when a button is clicked. I need to prevent the button from being clicked twice. This will prevent posting twice, which causes duplicate data in a database.

I tried adding;

OnClientClick="this.disabled='true';"

to try to disable the button in JavaScript. However, though the button becomes disabled, the postback for the button then doesn't work.

Disabling the button to prevent multiple submissions is the ideal for this application. How can I do this?

EDIT

I am unable to use third-part开发者_Python百科y controls.

If you simply disable the button then ASP.NET won't post the form. Also you want to deal with client-side validation. Here's my solution:

<asp:Button runat="server" ID="btnSave" 
   Text="Save" OnClick="btnSave_Click" 
   OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Saving...';" 
   UseSubmitBehavior="false" />

See @Dave Ward's post for a description of UseSubmitBehavior.

If you have multiple validation groups you'll need to enhance this solution for that.

You must return true after the OnClientClick:

OnClientClick="this.disabled='true';return true;"

Any clicks in client-side must return true if the postback is to continue, it's a means of providing client-side validatin on button presses.

You need to also set the Button's UseSubmitBehavior property to false.

Web browsers do not include disabled elements in a form's POST data, even if the element happens to be the button that triggered the form submission in the first place. Unfortunately, ASP.NET WebForms' single-form-page design relies on that bit of information to know which control raised the PostBack and which event handler to execute (i.e. Button1.On_Click).

Switching to UseSubmitBehavior="false" injects a __doPostBack('Button1', '') in the client-side onclick handler to work around that problem. Then, even if you disable the Button, the __doPostBack parameter lets ASP.NET know which control raised the PostBack and which events to fire on the server-side.

Most of this solutions provided above that suggest disabling won't work because you won't get a PostBack. This is the simplest and cleanest working solution I've seen:

OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"

To circumvent all validation and validation group issues, I found it easiest to use the window.onbeforeunload event, like so

<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

The above script disables the ASP.Net Button as soon as the page is ready to do a PostBack including validation or the ASP.Net form is submitted.

Disable ASP.Net button after click to prevent double clicking

I found that link very useful to solve this problem Disable ASP.Net button after click to prevent double clicking

I hope that can help :)

I usually add this method to my BasePage for reuse.

This code handle validations too

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name="button">The button.</param>
/// <param name="text">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text="wait..." )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm", "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("if(typeof(Page_ClientValidate)=='function' && !Page_ClientValidate()){{return true;}}this.value='{1}';this.disabled=true;{0}",
        ClientScript.GetPostBackEventReference(button, string.Empty),text));
}

Advantages

• Works out of the box for all buttons
  • Even buttons that did not trigger the submit will be disabled.
  • LinkButtons will also be disabled.
• Works with UpdatePanels (ie, partial and asynchronous postbacks)
• Works for full postbacks
• Won't disable buttons when validation prevents postback
• Button press, enter-key press and AutoPostBack events will cause buttons to become disabled

Limitations

† Most other solutions I have seen have these same limitations

• Relies on jQuery
• † Only works for ASP forms
• † If the user clicks the browser's cancel button after submission, the user will not be able to submit again and may get confused.
• † There remains other ways that a user could initiate a postback:
  • Submit using the enter key
  • Autopostback events

Code

Simply place this snippet at the bottom of your HTML code before the closing </body> tag.

<script type="text/javascript">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = 'asp-postback-disable';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            'a[href^="javascript:__doPostBack"]',
            ':submit'
        ].join(",");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === 'object' && console.error != null) {
                console.error('Prevent Double Submit Error:', ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector, 'form')
                    .addClass(disabledClass)
                    .on('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $('.asp-postback-disable,' + submittableSelector, 'form')
                    .removeClass(disabledClass)
                    .off('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === 'object') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s, e) { disableSubmit(); });
            prm.add_endRequest(function (s, e) { enableSubmit(); });
        }
        else {
            error('Sys is undefined.');
        }

        // Handle navigation (eg, Full postback)
        $(window).bind('beforeunload', function (e) {
            disableSubmit();
        });

    });
</script>

<style type="text/css">
    .asp-postback-disable { opacity: 0.25; }
</style>

One thing you can do is after clicking it hide it in the client side and show some loader images.

Or if its a form or something you can add recaptcha

After searching for a while, I came up with this solution.

$('form').submit(function () {
    $('input[type=submit][data-loading]').addClass('disabled');

    if ($(this).data('submitted') == true) {
        $('input[type=submit][data-loading]').attr('disabled', 'disabled');
        return false;
    }

    $(this).data('submitted', true);
});

The problem with the UseDefaultBehavior solution is that the Enter key stops not submitting the form which is used a lot. I am assuming that a considerable percentage of users try enter instead of clicking.

From an aspx.cs file you can add the script to address this (this is the only solution worked for me and was provided by: wexxix)

//Declaring the string to hold the script
string doubleClickScript = @"<script type='text/javascript'>
                                    function DisableButton() {
                                    document.getElementById('YOURBUTTONID').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(), "DoubleClickScript", doubleClickScript);

Obviously you can just add the script to the page, I just used like that since I just had access to the customer C# code. Thanks

You can also kinda "hack it" through by create a client-side button with the same style, hide the "original" Server-side button and using javascript to disable the HTML button/call the original button to click.

In the next postback, it will automatically revert your change on client-side button :).

<asp:Button ID="btnSubmitQuote" class="btn btn-red btn-block" runat="server" Text="Submit Quote" style="display:none;" OnClick="btnSubmitQuote_Click" UseSubmitBehavior="false" />

<button id="btnSubmitQuoteClient"  class="btn btn-red btn-block" onclick ="disableBtn(this);">Submit Quote</button>
<script type="text/javascript">
 function disableBtn(t) {
    t.setAttribute('disabled', 'disabled');
    var btn = document.getElementById('<%=btnSubmitQuote.ClientID %>');
    btn.click();
  }

You can also hide the button or change it for a loading gif to maintain feedback

$(document).on('submit','form',function (e) {
    $("input.SubmitButton").hide();
    // or change if to an loading gif image.
    return true;
});

In the Page_Load event of your form put this line:

btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");

Source: dotnetodyssey.com

Here is a quick solution. Set the width to 0 when they click on it. It will still submit but they will not be able to click it again. If you want to show it again in the scenario that there is a validation error then you can set the Width back to it original value on the server side click event.

OnClientClick="this.width=0;"