How to change the text of a button in jQuery?

583
votes

How do you change the text value of a button in jQuery? Currently, my button has 'Add' as its text value, and upon being clicked I want it to change to 'Save'. I have tried this method below, but so far without success:

$("#btnAddProfile").attr('value', 'Save');
21
jqueryjquery-ui
actually your example should work to change the value of the button. I tried it and it worked. Maybe the id of the button is different or a typo. - mjspier
Still doesn't work...could JQuery UI styles be causing this? - user517406
Sergey's answer was best. it is working properly on jquery buttons without removing its styles, padding and margins. - AaA

21 Answers

976
votes

Depends on what type of button you are using

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->

<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

Your button could also be a link. You'll need to post some HTML for a more specific answer.

EDIT : These will work assuming you've wrapped it in a .click() call, of course

EDIT 2 : Newer jQuery versions (from > 1.6) use .prop rather than .attr

EDIT 3 : If you're using jQuery UI, you need to use DaveUK's method (below) of adjusting the text property

155
votes

For buttons created with .Button() in jQuery........

Whilst the other answers will change the text they will mess up the styling of the button, it turns out that when a jQuery button is rendered the text of the button is nested within a span e.g.

<button id="thebutton">
  <span class="ui-button-text">My Text</span>
</button>

If you remove the span and replace it with text (as in the other examples) - you'll loose the span and associated formatting.

So you actually need to change the text within the SPAN tag and NOT the BUTTON!

$("#thebutton span").text("My NEW Text");

or (if like me it's being done on a click event)

$("span", this).text("My NEW Text");
81
votes

The correct way of changing the button text if it was "buttonized" using JQuery is to use .button() method:

$( ".selector" ).button( "option", "label", "new text" );
38
votes

To change the text in of a button simply execute the following line of jQuery for

<input type='button' value='XYZ' id='btnAddProfile'>

use

$("#btnAddProfile").val('Save');

while for

<button id='btnAddProfile'>XYZ</button>

use this

$("#btnAddProfile").html('Save');

22
votes

You need to do .button("refresh")

HTML :

<button id='btnviewdetails' type='button'>SET</button>

JS :

$('#btnviewdetails').text('Save').button("refresh");
12
votes

If you have button'ed your button this seems to work:

<button id="button">First caption</button>

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);
11
votes

You can use something like this:

$('#your-button').text('New Value');

You can also add extra properties like this:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
10
votes

You can use

$("#btnAddProfile").text('Save');

although

$("#btnAddProfile").html('Save');

would work as well, but it's misleading (it gives the impression you could write something like 

$("#btnAddProfile").html('Save <b>now</b>');

but of course you can't

10
votes

$("#btnAddProfile").text("Save");

5
votes
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
5
votes
document.getElementById('btnAddProfile').value='Save';
5
votes

it's work for me html:

<button type="button" class="btn btn-primary" id="btnSaveSchedule">abc</button>

js

$("#btnSaveSchedule").text("new value");
4
votes

$(document).ready(function(){
    $(":button").click(function(){
        $("p").toggle();

    if (this.value=="Add") this.value = "Save";
    else this.value = "Add";

  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<input type='button' value='Add' id='btnAddProfile'>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>
3
votes

Have you gave your button a class instead of an id? try the following code

$(".btnSave").attr('value', 'Save');
1
votes
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});
1
votes

This should do the trick:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');
1
votes
$("#btnAddProfile").html('Save').button('refresh');
0
votes

that's exactly correct, this works for me;

    $('#btnAddProfile').bind('click',function(){
    $(this).attr('value','save');
})

are you sure Jquery is available and that your code is in the correct place?

0
votes
    $( "#btnAddProfile" ).on( "click",function(event){
    $( event.target ).html( "Save" );
});
0
votes

Changing name of the button etiquette in C#.

<button type="submit" name="add" id="btnUpdate" class="btn btn-primary" runat="server" onserverclick="btnUpdate_Click">
Add


btnUpdate.**InnerText** = "Update";