Comment changer le texte d'un bouton dans jQuery?

Comment modifiez-vous la valeur de texte d'un bouton dans jQuery? Actuellement, mon bouton a «Ajouter» comme valeur de texte, et après avoir été cliqué, je veux qu'il devienne «Enregistrer». J'ai essayé cette méthode ci-dessous, mais jusqu'à présent sans succès:

$("#btnAddProfile").attr('value', 'Save');

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 peut également être un lien. Vous devrez publier du HTML pour une réponse plus spécifique.

EDIT : Cela fonctionnera en supposant que vous l'avez enveloppé dans un .click()appel, bien sûr

EDIT 2 : les versions plus récentes de jQuery (à partir de> 1.6) utilisent .propplutôt que.attr

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

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

Alors que les autres réponses changeront le texte, elles perturberont le style du bouton, il s'avère que lorsqu'un bouton jQuery est rendu, le texte du bouton est imbriqué dans une plage, par exemple

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

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

Vous devez donc réellement changer le texte dans la balise SPAN et NON PAS LE BOUTON!

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

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

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

La bonne façon de changer le texte du bouton s'il a été "boutonné" à l'aide de JQuery est d'utiliser la méthode .button ():

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

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

Utilisation .val()

Voici un lien vers JSfiddle

Tu as besoin de faire .button("refresh")

HTML :

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

JS :

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

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

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

Vous pouvez utiliser quelque chose comme ceci:

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

Vous pouvez également ajouter des propriétés supplémentaires comme celle-ci:

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

Vous pouvez utiliser

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

bien que

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

fonctionnerait aussi, mais c'est trompeur (cela donne l'impression que vous pourriez écrire quelque chose comme

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

mais bien sûr vous ne pouvez pas

document.getElementById('btnAddProfile').value='Save';

$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });

c'est du travail pour moi html:

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

js

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

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

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

$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});

Cela devrait faire l'affaire:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');

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

c'est exactement 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?

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

Modification du nom de l'étiquette du bouton en C #.

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

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