Como alterar o texto de um botão no jQuery?

548

Como você altera o valor do texto de um botão no jQuery? Atualmente, meu botão tem 'Adicionar' como valor de texto e, ao ser clicado, quero que ele mude para 'Salvar'. Eu tentei este método abaixo, mas até agora sem sucesso:

$("#btnAddProfile").attr('value', 'Save');
user517406
fonte
3
na verdade, seu exemplo deve funcionar para alterar o valor do botão. Eu tentei e funcionou. Talvez a identificação do botão seja diferente ou um erro de digitação.
Mjspier
Ainda não funciona ... os estilos de interface do usuário do JQuery poderiam estar causando isso?
user517406
4
A resposta de Sergey foi a melhor. está funcionando corretamente nos botões jquery sem remover seus estilos, preenchimento e margens.
AaA
use este $ ("# btnAddProfile"). prop ('value', 'Save');
Php developer

Respostas:

899

Depende do tipo de botão que você está usando

<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');

Seu botão também pode ser um link. Você precisará postar um pouco de HTML para obter uma resposta mais específica.

EDIT : Isso funcionará, desde que você o tenha envolvido em uma .click()chamada, é claro

EDIT 2 : As versões mais recentes do jQuery (de> 1.6) usam em .propvez de.attr

EDIÇÃO 3 : Se você estiver usando a interface do usuário do jQuery, precisará usar o método de DaveUK ( abaixo ) para ajustar a propriedade do texto

JohnP
fonte
7
Como funcionou usando .html ('Salvar'), não percebi que havia definido runat = server no meu botão, era isso que estava causando o problema.
user517406
De alguma maneira eu consigo fazer isso funcionar e não encolher meu botão jquery ui?
Sevenearths
2
não se preocupe com isso. Mudei de buttonpara inpute mudei os ícones redondos em vez de mexer com o texto. (Suponho que
algumas
8
Eu rebaixaria isso se pudesse, pois isso atrapalha o estilo em alguns casos. Por favor, use a resposta de DaveUK, se você tiver problemas com este . PS: Eu acho que é o Sevenearths notado, também
user562529
3
Melhor ainda: use a resposta de Sergey abaixo para o uso adequado do jQuery e para futuras provas: $ (".selector") .button ("option", "label", "new text");
cincodenada
148

Para botões criados com .Button () no jQuery ........

Enquanto as outras respostas alteram o texto, elas atrapalham o estilo do botão, mas quando um botão jQuery é renderizado, o texto do botão é aninhado dentro de um intervalo, por exemplo.

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

Se você remover a extensão e substituí-la por texto (como nos outros exemplos) - você perderá a extensão e a formatação associada.

Então, você realmente precisa alterar o texto na tag SPAN e NÃO no BOTÃO!

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

ou (se como eu, estiver sendo feito em um evento de clique)

$("span", this).text("My NEW Text");
DaveUK
fonte
4
Você não deveria esperar que essa estrutura DOM nunca seja alterada. Muito melhor é usar o método jQuery-UI para alterar o rótulo (consulte a resposta de Sergey).
Mike DeSimone 12/09
80

A maneira correta de alterar o texto do botão se ele foi "abotoado" usando o JQuery é usar o método .button ():

$( ".selector" ).button( "option", "label", "new text" );
Sergey
fonte
3
Isso funcionou para mim melhor do que as outras abordagens, que marcaram o estilo do botão (em particular o tamanho do botão). Eu estava usando um botão em uma caixa de diálogo jQuery UI, FWIW.
precisa saber é o seguinte
8
Esta é a resposta correta para os botões criados com o jQuery, como aqueles em uma caixa de diálogo. Todos os outros destruirão parte do estilo do jQuery. Isso também acontece sem depender da estrutura HTML que o jQuery gera, o que é mais à prova de futuro.
cincodenada
Esta é a resposta certa para esta pergunta (parece que a pergunta é sobre os botões da interface do usuário do Jquery, consulte os comentários), ela deve ser promovida.
peveuve
38

Para alterar o texto de um botão, basta executar a seguinte linha de jQuery para

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

usar

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

enquanto para

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

usa isto

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

Sangeet Menon
fonte
Além disso, para botões criados por jquery usando $('#thing').append($("<button />")....), por exemplo , você precisa usar .html para definir o texto.
21713 Benubird
22

Você precisa fazer .button("refresh")

HTML :

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

JS :

$('#btnviewdetails').text('Save').button("refresh");
user1464277
fonte
Por alguma razão, só funcionaria para mim depois que eu usei seu código para atualizar o botão, mas também notei que o ícone no botão (parte do CSS do JQuery Mobile) se perde após a atualização (embora sua solução seja a mais próxima) Eu tenho).
Ciaran Gallagher
12

Se você pressionou o botão, isso parece funcionar:

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

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

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

i_emmanuel
fonte
10

Você pode usar algo como isto:

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

Você também pode adicionar propriedades extras como esta:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
PurplePier
fonte
Não funciona botões de entrada ou enviar botões, uso val ()
ActiveX
8

Você pode usar

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

Apesar

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

funcionaria também, mas é enganoso (dá a impressão de que você poderia escrever algo como

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

mas é claro que você não pode

Gotofritz
fonte
6
document.getElementById('btnAddProfile').value='Save';
curtisk
fonte
5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
sauerburger
fonte
10
Repetir o código não útil da pergunta não é uma resposta.
21713 Benubird
4

é trabalho para mim html:

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

js

$("#btnSaveSchedule").text("new value");
Lobo cinzento
fonte
4

$(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>

Sudheer Kopparapu
fonte
2

Você deu ao seu botão uma classe em vez de um ID? tente o seguinte código

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

});
Feng
fonte
Inclua alguns detalhes sobre sua resposta.
Starx,
inclua detalhes com sua resposta. Não tenho idéia do que você está tentando fazer aqui.
Anurag
1

Isso deve fazer o truque:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');
Olle Klang
fonte
1
$("#btnAddProfile").html('Save').button('refresh');
Drastick
fonte
0

isso é exatamente correto, isso funciona para mim;

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

você tem certeza que o Jquery está disponível e que seu código está no lugar correto?

John Beynon
fonte
0
    $( "#btnAddProfile" ).on( "click",function(event){
    $( event.target ).html( "Save" );
});
Rajesh M. Kanojia
fonte
0

Alterando o nome da etiqueta do botão em C #.

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

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