change text of asp.net button with javascript

Question

I have a form submit button that has asp.net validators hooked up to it. If I make a javascript function to change the text to processing on click it does not work. The button flags the validators and also causes the whole page to post back. Heres the code I have:

C#

 protected void Page_Load(object sender, EventArgs e)
{
    btnPurchase.Attributes["onClick"] = "submit()";
}

Html

<script type="text/javascript">
    function submit() {
        document.getElementById("ctl00_ContentPlaceHolder1_btnPurchase").value = "Processing";
    };
</script>

My goal is to change the buttons text to purchasing onclick if the form passes validation, and then in my code behind it will change back to the original value once the form posts back.

Answer 1

I ran across this solution which works 100% perfect. I'm using the script manager with update panels...

<script type="text/javascript">

        // Get a reference to the PageRequestManager.
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        // Using that prm reference, hook _initializeRequest
        // and _endRequest, to run our code at the begin and end
        // of any async postbacks that occur.
        prm.add_initializeRequest(InitializeRequest);


        // Executed anytime an async postback occurs.
        function InitializeRequest(sender, args) {
            // Get a reference to the element that raised the postback,
            //   and disables it.
            $get(args._postBackElement.id).disabled = true;
            $get(args._postBackElement.id).value = "Processing...";
        }
        // Executed when the async postback completes.
        function EndRequest(sender, args) {
            // Get a reference to the element that raised the postback
            //   which is completing, and enable it.
            $get(args._postBackElement.id).disabled = false;
            $get(args._postBackElement.id).value = "Purchase";
        }

</script>

Answer 2

I just asked a very similar question (which was answered): ASP.NET Custom Button Control - How to Override OnClientClick But Preserve Existing Behaviour?

Essentially you need to preserve the existing behaviour of the submit button ( __doPostBack ). You do this with Page.GetPostBackEventReference(myButton) .

However with validation it's more difficult, so you'll need to do page validation inline ( Page.Validate() ) or create a custom control like i did and override the OnClientClick and PostBackOptions members.

Custom control is better, as i can now just drop this control on any page i want this behaviour.

You could do the same and expose a public property:

public string loadingText {get; set;}

Which could be used to customise the loading text on each page.

You basically need to set the onclick attribute to do the following:

onclick = "if (Page_Validate()) this.text = 'Processing';{0} else return false;"

{0} should be the regular postback action, retrieved from Page.GetPostBackEventReference.

The resulting logic will be: on click, validate the page, it it succeeds, change the text and postback, if it fails, return false - which will show the validation on the page.

Have the button set to default text "Submit" in the HTML, then wrap the above logic in !Page.IsPostBack so it will reset the text on form submit.

Hope that helps.