Change button text in jQuery

Question

I have a table which I want to hide or show on the click of a button. Also, when the button is clicked, its text should be changed appropriately. I have the following code, but the button's text is not being changed:

<script>
        $(document).ready(function () {
            $("#myButton").click(function () {
                $(".myTable").toggle(1000, "linear", function changeButtonText() {
                    $("#myButton").text = ($("#myButton").text === "Hide table" ? "Show table" : "Hide table");
                });
            });
        });
</script>

... 

<input type="button" id="myButton" value="Hide table" />
<table class="myTable">
    ...
</table>

It should be $("#myButton").text() not just $("#myButton").text — Bharat
– Bharat, Commented Mar 17, 2017 at 13:18

Marco Salerno · Accepted Answer · 2017-03-17 13:32:53Z

6

You didn't use the function in the right way:

If the element is button:

Error:

$("#myButton").text = ("new text");

Work:

$("#myButton").text("new text");

Working example:

$("#myButton").text("New text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="myButton">Old text</button>

If the element is input type="button":

Error:

$("#myButton").text = ("new text");

Work:

$("#myButton").val("new text");

Working example:

$("#myButton").val("New text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="myButton" value="Hide table" />

edited Mar 17, 2017 at 13:32

answered Mar 17, 2017 at 13:20

Marco Salerno

5,1912 gold badges14 silver badges32 bronze badges

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

1 Comment

Mr. Alien Over a year ago

It's an input tag and not button

Arg0n · Accepted Answer · 2017-03-17 13:23:35Z

5

Try this:

$("#myButton").val($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");

answered Mar 17, 2017 at 13:23

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

6 Comments

Arg0n Over a year ago

No it's not, mine works. $("#myButton").val(...), you have $("#myButton").val() = ....

Marco Salerno Over a year ago

@Waxi maybe you didn't see my answer ^^

Waxi Over a year ago

@Ionut You set the value by passing it INTO the val() method, not by assigning a value TO the val() method.

Arg0n Over a year ago

@Waxi thanks for clarifying, he has a hard time understanding :)

Eutherpy Over a year ago

@Arg0n Thanks. This is indeed the only working answer.

|

stackoverfloweth · Accepted Answer · 2017-03-17 13:19:12Z

2

use this to change the text of your button

$("#myButton").attr('value', 'newText');

answered Mar 17, 2017 at 13:19

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Comments

Arun Chandran Chackachattil · Accepted Answer · 2017-03-17 13:30:27Z

0

I have to tweak your code and worked for me.You have to pass the vale like $("#myButton").val(Buttontext);

$(document).ready(function() {
  $("#myButton").click(function() {
    $(".myTable").toggle(1000, "linear", function changeButtonText() {

    var text= ($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
    $("#myButton").val(text);
    });
  });
});

fiddle work for me

answered Mar 17, 2017 at 13:30

Arun Chandran Chackachattil

3,3627 gold badges33 silver badges45 bronze badges

Comments

SGventra · Accepted Answer · 2017-03-17 13:31:10Z

0

you can use if statement to check the value of your button but first you must get the attribute which is value.

$("#myButton").click(function () {
    $(".myTable").toggle(1000, "linear", function changeButtonText() {
        var text = $("#myButton").attr("value");
      if(text == "Hide table") {
        $("#myButton").attr("value","Show table");
      }
      else {
        $("#myButton").attr("value","Hide table");
      }
    });
});

answered Mar 17, 2017 at 13:31

SGventra

1051 gold badge1 silver badge10 bronze badges

Comments

Jesse de gans · Accepted Answer · 2017-03-17 13:35:58Z

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


... 

<button id="myButton">Hide table</button>
<table class="myTable">
    <tr><td>works</td></tr>
</table>
<script>
            $("#myButton").click(function () {
            
                if($("#myButton").text() == "Hide table") { 
                  $(".myTable").hide();
                  $("#myButton").text("Show table");
                } 
                else {
                  $(".myTable").show();
                  $("#myButton").text("Hide table");
                }
                
            });
    </script>

Put the javascript at the bottom of your body delete the ready function this works for me

answered Mar 17, 2017 at 13:35

Jesse de gans

1,6541 gold badge16 silver badges28 bronze badges

Collectives™ on Stack Overflow

Change button text in jQuery

6 Answers 6

1 Comment

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related