jQuery Change Button Text Value Dynamically.

satinder singh / Updated : / 0 Comments

Button text changed dynamically: This article explains how on button click we can change text value of that clicked button  .i.e dynamic button text value gets changed. For example, when we have buttons like

For example, when we have buttons like Follow, Like, Pending, etc. and on click we need to change its text as Unfollow, Unlike, Complete, so here with jquery, we can easily modify the button text based on some condition.

In jquery we use .val() method for changing the text of  button, and if the button is div tag then for div tag we have to change its text then we use .text() method.


Add a button tag, and on button click will amend its text.

<input id="myBtn" type="button" value="Show" />


jQuery: code to change button text.

    var self=$(this);
    if(self.val()=="Show")     {
    else {


Here in the above code myBtn is the button id. And on click() event we check its value and according to the current text we change our button text.

In real development on button click jquery ajax function gets call and based on its response the button text gets changed. As keeping this article as simple, we are not going to make any ajax call, instead, we just checked the current text and changed based on it.

You might have noticed here in above jquery code variable self is used this is called caching variable good (practise performance wise).

If You Liked It, could you do me a favour and tell your friends !! By sharing it on Facebook, Google+ or Twitter.

Post Comment

Your email address will not be published. Required fields are marked *