web-dev-qa-db-fra.com

Comment changer le texte d'un bouton dans jQuery?

Comment modifiez-vous la valeur de texte d'un bouton dans jQuery? Actuellement, la valeur du texte de mon bouton est "Ajouter" et, après avoir été cliquée, je souhaite le changer en "Enregistrer". J'ai essayé cette méthode ci-dessous, mais jusqu'à présent sans succès:

$("#btnAddProfile").attr('value', 'Save');
jqueryjquery-ui
460
user517406

Dépend du type de bouton que vous utilisez

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

Votre bouton pourrait aussi être un lien. Vous aurez besoin de poster du HTML pour une réponse plus précise. 

EDIT: Celles-ci fonctionneront si vous l'avez encapsulé dans un appel .click(), bien sûr

EDIT 2: les versions plus récentes de jQuery (à partir de> 1.6) utilisent .prop au lieu de .attr

EDIT 3: Si vous utilisez l'interface utilisateur de jQuery, vous devez utiliser la méthode de DaveUK ( ci-dessous ) pour ajuster la propriété text. 

770
JohnP

Pour les boutons créés avec .Button () dans jQuery ........

Alors que les autres réponses vont changer le texte, elles vont gâcher le style du bouton, il s'avère que quand un bouton jQuery est rendu, le texte du bouton est imbriqué dans une étendue, par exemple.

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

Si vous supprimez l'étendue et la remplacez par du texte (comme dans les autres exemples), vous perdrez l'étendue et la mise en forme associée.

Donc, vous devez réellement changer le texte dans la balise SPAN et PAS le BOUTON!

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

ou (si comme moi, cela se fait sur un événement clic)

$("span", this).text("My NEW Text");
132
DaveUK

La bonne façon de changer le texte du bouton s'il était "buttonized" avec JQuery est d'utiliser la méthode .button ()

$( ".selector" ).button( "option", "label", "new text" );
77
Sergey

Pour changer le texte d'un bouton, exécutez simplement la ligne suivante de jQuery pour

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

utilisation

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

tandis que pour

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

utilisez ceci

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

35
Sangeet Menon

Utilisez .val()

Voici un lien vers JSfiddle

32
rsplak

Vous devez faire .button("refresh")

HTML:

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

JS:

$('#btnviewdetails').text('Save').button("refresh");
18
user1464277

Si vous avez appuyé sur votre bouton, cela semble fonctionner:

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

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

Vous pouvez utiliser quelque chose comme ceci:

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

Vous pouvez également ajouter des propriétés supplémentaires comme ceci:

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

Vous pouvez utiliser

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

bien que

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

fonctionnerait aussi bien, mais c’est trompeur 

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

mais bien sûr vous ne pouvez pas

8
gotofritz
document.getElementById('btnAddProfile').value='Save';
6
curtisk
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
5
sauerburger

c'est un travail pour moi html:

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

js

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

Avez-vous donné à votre bouton une classe au lieu d'un identifiant? essayez le code suivant

$(".btnSave").attr('value', 'Save');
2
Nicholas Murray

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

2
Sudheer Kopparapu

Cela devrait faire l'affaire:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');
1
Olle Klang
$("#btnAddProfile").html('Save').button('refresh');
1
Drastick
    $( "#btnAddProfile" ).on( "click",function(event){
    $( event.target ).html( "Save" );
});
0
Rajesh M. Kanojia

Changer le nom du bouton Etiquette en C #.

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


btnUpdate.**InnerText** = "Update";
0
Ismary Izquierdo
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});
0
Feng

c'est tout à fait correct, cela fonctionne pour moi;

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

Êtes-vous sûr que Jquery est disponible et que votre code est au bon endroit?

0
John Beynon