Disabling the button after once click

Question

Hi All,

In my application i need to disable the button once it is clicked so that user should not click more than once. APplication is MVC ASP.NET i have done this in normal asp.net application. I tried using javascript and Jquery its not working button is getting disabled but then form is not getting submitted

<script language="javascript">

        $("#ClickMe").attr("disabled", "disabled"); 


</script>

Javascript

function DisableNextButton(btnId) {



        document.getElementById(btnId).disabled = 'true';

}

both are working great only for disabling part ... post back is not happening at all thanks

Answer 1

If when you set disabled="disabled" immediately after the user clicks the button, and the form doesn't submit because of that, you could try two things:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled  

Although I honestly bet there will be a better way to do this, than that.

Answer 2

My guess is that your problem is because you are using asynchronous postback. While a go I had the same problem too. I created a base class for all pages, after that in load event register this function

string script = "\n<script language=JavaScript id='PreventButtonDoubleSubmiting'>\n";
            script += "function preventDoubleSubmiting(e){ \n";
            script += "if(typeof(Sys) == 'undefined') return; \n";
            script += "var prm = Sys.WebForms.PageRequestManager.getInstance();\n";
            script += "if (prm && prm.get_isInAsyncPostBack()){e.processOnServer = false;return true;}\n";
            script += "return false;\n";
            script += "}\n";
            script += "</script>";


            ClientScript.RegisterStartupScript(this.GetType(), "PreventButtonDoubleSubmiting", script);

and for each button click I call this function onlick event. this function checks if postback is going on, prevents button click. and after postback done, buttons will work how expected. Note that I am using Dev Express ASPxButton, and e is the instance of that button, but it can easily be modified for standard asp.net button.

Hope this helps