How to disable button after click to avoid multiple post requests?

Question

I want to disable a server side asp.net button control after click for some seconds & then fire a server side event. I am trying to use setTimeout but if I use setTimeout the server side event is never fired. Can anybody help?

   <script type="text/javascript">
    function disableBtn(btnId, dspTxt) {
        var btn = document.getElementById(btnId);
        btn.value = dspTxt;
        setTimeout(btn.disabled = true,1000);
    }
</script>

why do you need disable in client side? you can disable in btn_Click — Mert, Dec 13 '12 at 10:56
I don't want to use Sleep. I just want to disable it for say 2 seconds & fire server side event. It seems disable=true nullifies server side code to fire? — Zo Has, Dec 13 '12 at 10:58
Maybe this helps you http://stackoverflow.com/questions/13825543/validator-causes-improper-behavior-for-double-click-check/13825630#13825630 — Boriss Pavlovs, Dec 13 '12 at 10:58
Any special reason for setTimeout? What are you actualy trying to achieve here? Disable server button without postback from clicking another client/server control? — Gregor Primar, Dec 13 '12 at 11:01
@Gregor I am trying to disable the button client side for say 2 seconds (keep it disabled) then fire a server side event. — Zo Has, Dec 13 '12 at 11:03
setTimeout(function(){btn.disabled = true;},1000); setTimeout has to call some function — Boriss Pavlovs, Dec 13 '12 at 11:52

score 1 · Answer 1 · answered Dec 13 '12 at 10:58

1

How about using jQuery?

$('#buttonId').attr("disabled", true);

or in a function it would be

function disableBtn(btnId, dspTxt) {
  var button = $(btnId);
  button.attr("disabled", true);
  button.text(dspTxt);
}

http://www.w3schools.com/jsref/prop_select_disabled.asp

answered Dec 13 '12 at 10:58

kzhen

3,020
19
21

I am able to disable the button. I wanted to fire the server side event after disabling my button for 2 seconds (keeping it disabled during this event). – Zo Has Dec 13 '12 at 11:59

Gregor Primar · Accepted Answer · 2012-12-13T12:07:31.530

Place two buttons on your form:

<asp:Button ID="ButtonToDisable" runat="server" Text="Button" />
<asp:LinkButton ID="PostBackLinkButton" runat="server" onclick="PostBackLinkButton_Click"></asp:LinkButton>

First one is button that will be disabled after 2 seconds, second is button that will do the postback.

Next put this code inside page.cs:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "timer",
               "setTimeout(function(){" + Page.ClientScript.GetPostBackEventReference(PostBackLinkButton, String.Empty) + "},2000)", true);
        }
    }

    protected void PostBackLinkButton_Click(object sender, EventArgs e)
    {
        ButtonToDisable.Enabled = false;
        ButtonToDisable.Text = "Button is disabled!";
    }

Now just run the page and wait for 2 seconds and postback will occur and disable PostBackLinkButton.

If you don't want that postback is visible to the user place buttons inside the updatepanel.

Boriss Pavlovs · Answer 3 · 2012-12-13T11:42:01.190

If I correctly understand you need something like this:

 var isClicked=false;
 $('.myButton').click(function (e) {
    e=e?e:window.event;
    if(!isClicked){
        if($.browser.msie){e.cancelBubble=true; e.returnValue=false;}
      else
        e.preventDefault();
    isClicked=true;   
    $(this).attr('disabled','disabled');
    setTimeout(function(){delayClick();},1000);
  }

});
function delayClick()
{
   $(this).removeAttr('disabled');
   $('.myButton').click();

}

How to disable button after click to avoid multiple post requests?

3 Answers3