Disable buttons on post back using jquery in .net app

Question

I have a asp.net app that I want to disable the buttons as soon as they are clicked in order to prevent multiple submissions. I\'d like to use jquery for this as the site a

Answer 1

I just wanted to add an additional resolution. We decided to just completely remove the button once it was clicked and replace it with some text.

To do this we did:

$(function () {
    $(".DisableButton").click(function () {
        $(this).hide();
        $(this).after('<p>Please Wait.  Retrieving information.  This may take up to 60 seconds.</p>');

    });
});

Note that this hides the button then injects some html after the buttons code. Hiding it allows .Net to go ahead and run the onclick handler during post back while removing it as a clickable thing on the screen.

Answer 2

Add this attribute to your button:

usesubmitbehavior="False"

This will insert something like the following into onclick:

javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Main$Tabs$SaveTab$Cancel", "", true, "", "", false, false))

This code will cause a post back even if the button is disabled. Showing a confirmation dialog and allowing the post back to be cancelled gets a little more interesting:

    var click = $("[id$='_Cancel']")[0].onclick;
    $("[id$='_Cancel']")[0].onclick = null;
    $("[id$='_Cancel']").bind('click', function (event) { addFeeSchedule.onCancelClick(event) });
    $("[id$='_Cancel']").bind('click', click);

In order to prevent the post back from occurring immediately, remove the onclick code inserted by .net and bind it after your own function using jQuery. Use event.stopImmediatePropagation(), to prevent the post back:

onCancelClick: function (event) {

    var confirmResponse;

    confirmResponse = confirm('No fee schedule will be created.\n\nAre you sure you want to cancel?');

    if (confirmResponse == true) {

        showWait();
        event.target.disabled = 'true';

    } else {

        event.stopImmediatePropagation();

    }

},

Answer 3

For this you have to use input button attribute disable all the controls

<script language="javascript" type="text/javascript">
    function MyDisableFunction() {
        alert(`Now You Postback Start`);
        $(":input").attr("disabled", true);
        return true;
    }

</script>

Fore more detail check this link

Answer 4

The answer provided by Nick Craver is by far the best solution that I've found anywhere on the net. There is one situation, however, where the solution does not work well - when the form contains submit buttons within an UpdatePanel with it's UpdateMode property set to "Conditional" and/or ChildrenAsTriggers property set to false.

In these situations, the contents of the update panels are not automatically refreshed when the async postback has completed. So if these update panels contained any submit buttons then the given solution would effectively leave these buttons permanently disabled.

The following enhancement to the solution handles this problem by re-enabling the buttons after an async, or 'partial', postback:

var canProcessClicks = true;

if (typeof (Sys) != 'undefined') {
    // handle partial-postback
    var requestManager = Sys.WebForms.PageRequestManager.getInstance();
    requestManager .add_initializeRequest(function() {
        // postback started
        canProcessClicks = false;
    });
    requestManager .add_endRequest(function() {
        // postback completed
        canProcessClicks = true;
    });
}

$(function () {
    $('input[type=submit]').on("click", function () {
        return canProcessClicks ;
    });
    $("#aspnetForm").submit(function () {
        if (typeof (Sys) != 'undefined' && Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            // this is an async postback so ignore because this is already handled
        } else {
            // full postback started
            canProcessClicks = false;
        }
    });
});

Answer 5

The approach of disabling the button before the submit has two effects: -

a) The button takes on the disabled appearance.

b) The button's value is not posted in the form parameters.

If the button's value is not being posted to the server, ASP.Net does not know which button was pressed and thus it does not run the relevent OnClick handler.

To verify add the following to your code behind

protected void Page_Load(object sender, EventArgs e)
{
    Response.Write("Load " + IsPostBack + "<br />");
    foreach (string s in Request.Form.AllKeys)
    {
        Response.Write(string.Format("s:'{0}' = {1}<br />", s, Request.Form[s]));
    }
}

And then run the page (both with J.S. to disable the buttons and without). If the button's value is not being posted to the server, ASP.Net does not know which button was pressed and thus it does not run the relevent OnClick handler.

Answer 6

You can do it a slightly different way, like this:

$(function () {
  $("#aspnetForm").submit(function () {
    $('input[type=submit]').click(function() { return false; });
  });
});

What this does is makes future clicks ineffective, basically making them do nothing. When you disable an input, it also removes the key/value pair from being submitted with the <form>, so your server-side action which is triggered by it doesn't work.

It's worth noting, in jQuery 1.4.3 you'll be able to shorten this down to:

$(function () {
  $("#aspnetForm").submit(function () {
    $('input[type=submit]').click(false);
  });
});