¿Cómo cambiar el texto de un botón en jQuery?

548

¿Cómo se cambia el valor de texto de un botón en jQuery? Actualmente, mi botón tiene 'Agregar' como valor de texto y, al hacer clic, quiero que cambie a 'Guardar'. He probado este método a continuación, pero hasta ahora sin éxito:

$("#btnAddProfile").attr('value', 'Save');
usuario517406
fuente
3
en realidad su ejemplo debería funcionar para cambiar el valor del botón. Lo intenté y funcionó. Tal vez la identificación del botón es diferente o un error tipográfico.
mjspier
Todavía no funciona ... ¿podrían los estilos de IU de JQuery estar causando esto?
user517406
44
La respuesta de Sergey fue la mejor. funciona correctamente en los botones jquery sin eliminar sus estilos, relleno y márgenes.
AaA
use este $ ("# btnAddProfile"). prop ('valor', 'Guardar');
Desarrollador de PHP el

Respuestas:

899

Depende de qué tipo de botón 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');

Su botón también podría ser un enlace. Deberá publicar algo de HTML para obtener una respuesta más específica.

EDITAR : funcionará suponiendo que lo haya envuelto en una .click()llamada, por supuesto

EDIT 2 : Las versiones más nuevas de jQuery (desde> 1.6) usan en .proplugar de.attr

EDITAR 3 : si está usando jQuery UI, debe usar el método de DaveUK (a continuación ) para ajustar la propiedad de texto

JohnP
fuente
77
Lo hice funcionar usando .html ('Guardar'), no me di cuenta de que había configurado runat = server en mi botón, esto es lo que estaba causando el problema.
user517406
¿De alguna manera puedo hacer que esto funcione y que no se encoja mi botón de jquery ui?
Sevenearths
2
no te preocupes por eso Cambié de buttona inputy cambié los íconos redondos en lugar de jugar con el texto. (Supongo que algo no estaba destinado a ser)
Sevenearths
8
Lo rechazaría si pudiera, ya que en algunos casos desordena el estilo. Utilice la respuesta de DaveUK, si tiene problemas con esta . PD: Supongo que eso es lo que Sevenearths también notó
user562529
3
Aún mejor: use la respuesta de Sergey a continuación para el uso adecuado de jQuery y para pruebas futuras: $ (".selector") .button ("opción", "etiqueta", "texto nuevo");
cincodenada
148

Para botones creados con .Button () en jQuery ........

Si bien las otras respuestas cambiarán el texto, alterarán el estilo del botón, resulta que cuando se representa un botón jQuery, el texto del botón está anidado dentro de un intervalo, por ejemplo

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

Si elimina el intervalo y lo reemplaza con texto (como en los otros ejemplos), perderá el intervalo y el formato asociado.

Por lo tanto, ¡realmente necesita cambiar el texto dentro de la etiqueta SPAN y NO el BOTÓN!

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

o (si como yo se está haciendo en un evento de clic)

$("span", this).text("My NEW Text");
DaveUK
fuente
44
No debe esperar que esta estructura DOM nunca cambie. Mucho mejor es usar el método que jQuery-UI le da para cambiar la etiqueta (vea la respuesta de Sergey).
Mike DeSimone
80

La forma correcta de cambiar el texto del botón si se "abotonó" usando JQuery es usar el método .button ():

$( ".selector" ).button( "option", "label", "new text" );
Sergey
fuente
3
Esto funcionó para mí mejor que los otros enfoques, que pisotearon el estilo del botón (en particular el tamaño del botón). Estaba usando un botón en un diálogo de jQuery UI, FWIW.
Dave Crumbacher
8
Esta es la respuesta correcta para los botones creados con jQuery, como los de un cuadro de diálogo. Todos los demás destruirán parte del estilo jQuery. Esto también lo hace sin depender de la estructura HTML que genera jQuery, que está más preparada para el futuro.
cincodenada
Esta es la respuesta correcta a esta pregunta (parece que la pregunta es sobre los botones de la interfaz de usuario de Jquery, vea los comentarios), debe promoverse.
peveuve
38

Para cambiar el texto de un botón, simplemente ejecute la siguiente línea de jQuery para

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

utilizar

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

mientras que para

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

utilizar este

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

Sangeet Menon
fuente
Además, para los botones creados por jquery usando $('#thing').append($("<button />")....), por ejemplo , necesita usar .html para configurar el texto.
Benubird
22

Necesitas hacer .button("refresh")

HTML :

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

JS :

$('#btnviewdetails').text('Save').button("refresh");
usuario1464277
fuente
Por alguna razón, solo funcionaría para mí después de usar su código para actualizar el botón, pero también noté que el ícono en el botón (parte de JQuery Mobile CSS) se pierde después de actualizarlo (aunque su solución fue la más cercana Tengo).
Ciaran Gallagher
12

Si ha abotonado su botón, esto parece funcionar:

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

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

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

i_emmanuel
fuente
10

Puedes usar algo como esto:

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

También puede agregar propiedades adicionales como esta:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
PurplePier
fuente
No funciona botones de entrada o botones de envío, use val ()
ActiveX
8

Puedes usar

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

a pesar de que

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

funcionaría bien, pero es engañoso (da la impresión de que podrías escribir algo como

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

pero claro que no puedes

Gotofritz
fuente
6
document.getElementById('btnAddProfile').value='Save';
curtisk
fuente
5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
sauerburger
fuente
10
Repetir el código que no funciona de la pregunta no es una respuesta.
Benubird
4

es trabajo para mí html:

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

js

$("#btnSaveSchedule").text("new value");
Lobo gris
fuente
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>

De repente Kopparapu
fuente
2

¿Le ha dado a su botón una clase en lugar de una identificación? prueba el siguiente código

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

});
Feng
fuente
Incluya algunos detalles sobre su respuesta.
Starx
por favor incluya detalles con su respuesta. No tengo idea de lo que estás tratando de hacer aquí.
Anurag
1

Esto debería funcionar:

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

eso es exactamente correcto, esto funciona para mí;

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

¿estás seguro de que Jquery está disponible y que tu código está en el lugar correcto?

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

Cambio de nombre de la etiqueta del botón en C #.

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

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