How does Stackoverflow's "Post Your Question" button stay disabled until question gets submitted?

Question

I am using asp.net webforms; I want to submit a form and keep the button disabled until it gets saved to my database, exactly like Stackoverflow. Any suggestion?

protected void Lb_Save_Click(object sender, EventArgs e)
{
   //disable my button
      //Do a DB insert 
   //enable my button
}

EDIT:

I'll do a client-side validation first so I don't want my button to be disabled there but I want to disable it once the onclick function starts. Hope you all get my point.

Also i would like to do the same for asp:linkbutton but i don't know how firefox behaves for it. As the linkbutton will be rendered as anchor how can i disable it?

Guys you didn't get my question.

How to disable asp:button during postback? (not in jQuery/Javascript)

Answer 1

Short answer: Javascript.

Longer answer:

$('#formid').submit(function () {
     $('#buttonid').hide();
 $('#disabledbuttonimageid').show();
});

Answer 2

It disables it on submit(), it never enables it again because you're redirected. However, if you wanted to do some sort of validation you would just do

$("#yourForm").submit(function(e) {
    $("#yourButton").attr('disabled','disabled');
    if (whateverValidation) {
        e.preventDefault();
        $("#yourButton").removeAttr('disabled');
    } 
});

Answer 3

Ok, heres some code that can give you an idea on what to do. You will need class DISABLED which will set the appropriate CSS styles of the button or whatever so it appears disabled...

CLIENT SIDE JAVA SCRIPT

function doRequest(MY_DATA_THAT_I_WANT_TO_SEND)
{
    $.ajax({
       type: "GET",
       url: "saving_page.aspx?data="+MY_DATA_THAT_I_WANT_TO_SEND,
       timeout: 10000,
       beforeSend: function()
       {    
           $("#button").toggleClass("DISSABLED");
       },
       complete: function(XMLHttpRequest, textStatus)
       {
           //Or you can remove success handler and let complete hander enables
           //the button, so it gets enabled if there was an error or there was success
           //$("#button").toggleClass("DISSABLED");         
       },                             
       success: function(data)
       {                                            

           if(data == "OK") $("#button").toggleClass("DISSABLED");                       
       }

     });        
};

SERVER SIDE CS

protected void Page_Load(object sender, EventArgs e)
{
    string data = Request.Params.Get("data");
    saveDataToDataBase(data);

    //Sleep some more...
    Thread.Sleep(3000);

    //Send ok
    Response.Write("OK");
    Response.End();
}

Answer 4

How? That's a magic.

Now, if you don't want javascript:

1. On postback, disable the button.
2. Do no real work, but set Session variable to indicate what work is needed.
3. Set HTML meta tag to force immediate refresh.
4. Return - browser will immediate refresh the page.
5. When you get request now, you check for Session var, and do the work.

There might be other ways, but frankly they all are gonig to be weird, why don't you want JavaScript?

Answer 5

The only way to do this with web forms (which is not mvc) is to hide the original button and replace it with a picture of the disabled button or another button which is disabled. If you actually disable the button .net's JavaScript will not do the submit.

(Yes, I know you can "hack" the .net JavaScript, but really, is that any better?)

The JavaScript to do this is simple once you know what you need to do -- if you want to see some code I should be able to dig it up -- just ask in the comments.

NB: MVC should be as simple as the code in the other answers which just disable the button before the ajax call. SO is using MVC so they don't have the problems you are experiencing.

Answer 6

Please try following code.

protected void Button1_Click(object sender, EventArgs e)
{

    //check you conditions

    Button1.Enabled = false;

    //process your form submit

    Button1.Enabled = true;

}