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>