Change text of RadButton on client-side with JavaScript

3 posts, 1 answers
  1. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 04 Apr 2011 Link to this post

    Hi!  Could someone provide me an example of how to change the text of a RadButton using JavaScript?  Basically when a user clicks the 'submit' button I want to display an alert message, disable the button, and change the text to say 'Submitting'.  I've got the alert message working, but the button text doesn't appear to change nor is it disable.

    Here's the lines of code for the javascript...
    <telerik:RadCodeBlock ID="rcb1" runat="server">
        <script type="text/javascript">
            function DisableSubmitBtn() {
                alert("Submitting Review, please do not click submit more than once");
                document.getElementById('<% =btnItemSubmitE.ClientId %>').value = 'Submitting'; 
               
            }
        </script>
    </telerik:RadCodeBlock>

    Here's the button code...
    <telerik:RadButton ID="btnItemSubmitE" runat="server" Skin="Sunset" Text="Submit"
                                Width="45%" ValidationGroup="Review" OnClientClicked="DisableSubmitBtn" >
                                <Icon PrimaryIconCssClass="rbOk" PrimaryIconLeft="4" PrimaryIconTop="4" />
                            </telerik:RadButton>


    There are validation controls on the page and a RadAjaxManager is being used.

    Thank you!
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Apr 2011 Link to this post

    Hi Amy,

    The set_text(textToSet) client-side method should be used to set the button's text on the client. Basically your JS code will look like the following:
    <script type="text/javascript">
    function DisableSubmitBtn() {
       alert("Submitting Review, please do not click submit more than once");
       $find('<% =btnItemSubmitE.ClientId %>').set_text("Submitting");          
    }
    </script>

    A list of RadButton's client-side methods and properties can be found on the following link: http://www.telerik.com/help/aspnet-ajax/button-client-side-basics.html.

    An example showing a "Single click" button can be found on our online demos site.

    Best wishes,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amy
    Amy avatar
    105 posts
    Member since:
    Aug 2010

    Posted 05 Apr 2011 Link to this post

    Pero, thank you!  That worked wonderfully, and I've bookmarked the link you provided.  ;-)

    Thanks again!
Back to Top