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.

If it were me, I would just save myself the headache and disable the button and show dynamically add some sort of "Processing ..." image to the page. You can get some great "spinner" images free from ajaxload.info — Nate Pinchot
– Nate Pinchot, Commented Aug 21, 2010 at 23:04
The problem I was having is that the button wouldn't disable itself until after the page posted back, not on click — The Muffin Man
– The Muffin Man, Commented Aug 21, 2010 at 23:32

The Muffin Man · Accepted Answer · 2010-08-21 23:30:54Z

2

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>

answered Aug 21, 2010 at 23:30

The Muffin Man

20k30 gold badges128 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RPM1984 Over a year ago

you're assuming he's using ajax to submit the form.

RPM1984 Over a year ago

lolz, didnt even realise you were the OP. cool, all good then =)

Community · Accepted Answer · 2017-05-23 12:07:08Z

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.

Collectives™ on Stack Overflow

change text of asp.net button with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related