Can't combine button-disable and code-behind function (JavaScript + code-behind)

Question

When clicking on Insert -button, it does whatever it's suppose to do. But I don't want user to be able to click the button more than once and therefore I want to disable it once you press it.

<asp:Button ID="Insert" runat="server" Text="Send" OnClick="Insert_OnClick" 
  OnClientClick="this.disabled=true; showLoading(this);" />

When combining Insert_OnClick and " disable ", the function Insert_OnClick wont run, because it somehow disable the button first and therefore the code-behind function wont run for that reason.

I also tried to disable to button itself in showLoading js-function, same behavior.

Any idea how to make the code-behind function run as the button get disabled?

Answer 1

You need to disable it in code behind. Even if you did disable it after the click, the changes made with javascript would still be undone after PostBack.

protected void Button1_Click(object sender, EventArgs e)
{
    Insert.Enabled = false;
}

Or set a timeout on the OnClientClick? Maybe that will work.

OnClientClick="setTimeout(function () { this.disabled=true; }, 10);"

Answer 2

If possible, I would change the Submit behavior.

the problem with that approach is that the front end code takes place before the back end submit and if you disable the button before the back end submit then it won't be able to call the back end function.

Instead i would use different approaches, like consuming a webMethod or submiting the whole form .

with the web method you would be able to play a little bit with the front end while the back end finishes processing

With the whole submit you'll have to play with the page_load Event