Button properties not changing on click event

Question

It's probably something simple, however, the button text and enabled state don't change when the page is valid.

I have a button on the web form and the following code behind on the save click event:

if (Page.IsValid) {
    btnSave.Enabled = false;
    btnSave.Text = "Saving, please wait...";

    // Save method, etc...        
}

Answer 1

You are first setting the Button Enabled state and Text, and then you are running your saving methods.

This all happens server-side, within the Request that was caused by the Button click. The client browser will not receive a completed Response until after your Save method has run.

If you want your Button to change before your Save method is run, you must do it client-side with JavaScript.

Answer 2

I guess you are trying to disable users from clicking the Save button repeatedly during processing.

But the code is written on server side and the browser will only get the response at the end. To achieve what you are trying to do, you need to disable the button on the client side.

This can be done using javascript and handling hte onClientClick event of the button.

Readup at : http://encosia.com/disable-a-button-control-during-postback/

<asp:Button runat="server" ID="BtnSubmit" 
  OnClientClick="this.disabled = true; this.value = 'Submitting...';" 
  UseSubmitBehavior="false" 
  OnClick="BtnSubmit_Click" 
  Text="Submit Me!" />

Note: this will work for full postbacks and not in an ajax enabled scenario.

Edit: try this

<asp:Button ID="Button1" UseSubmitBehavior="false" 
    runat="server" Text="Button" OnClientClick="DisableAfterValidation(this)" OnClick="Button1_Click" />

<script>
        function DisableAfterValidation(btn) {

            if (typeof (Page_ClientValidate) == 'function') {
                var isPageValid = Page_ClientValidate();
                if (isPageValid) {                        
                    btn.disabled = true;
                    btn.value = "please wait...";
                }
            }
        }
</script>