How do I prevent users clicking a button twice?

Question

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-party controls.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.