it-swarm.com.de

Wie kann ich den Text einer Schaltfläche in jQuery ändern?

Wie ändern Sie den Textwert einer Schaltfläche in jQuery? Derzeit hat die Schaltfläche "Hinzufügen" als Textwert, und wenn Sie darauf klicken, möchte ich, dass sie in "Speichern" geändert wird. Ich habe diese Methode unten ausprobiert, aber bisher ohne Erfolg:

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

Hängt davon ab, welche Art von Schaltfläche Sie verwenden

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

Ihre Schaltfläche kann auch ein Link sein. Sie müssen etwas HTML veröffentlichen, um eine genauere Antwort zu erhalten. 

EDIT: Dies funktioniert natürlich, sofern Sie es in einen .click()-Aufruf eingebunden haben

EDIT 2: Neuere jQuery-Versionen (ab> 1.6) verwenden .prop anstelle von .attr.

EDIT 3: Wenn Sie die jQuery-Benutzeroberfläche verwenden, müssen Sie die Methode DaveUK ( unter -) zum Anpassen der Texteigenschaft verwenden 

770
JohnP

Für mit .Button () in jQuery erstellte Schaltflächen ........

Während die anderen Antworten den Text ändern, werden sie den Stil der Schaltfläche durcheinander bringen, es stellt sich jedoch heraus, dass der Text der Schaltfläche beim Rendern einer jQuery-Schaltfläche innerhalb eines Bereichs verschachtelt ist, z.

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

Wenn Sie den Bereich entfernen und durch Text ersetzen (wie in den anderen Beispielen), verlieren Sie den Bereich und die zugehörige Formatierung.

Sie müssen also den Text innerhalb des SPAN-Tags ändern und NICHT den KNOPF!

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

oder (wenn wie ich es auf einem Click-Event gemacht wird)

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

Die korrekte Methode zum Ändern des Schaltflächentextes, wenn er mit JQuery "buttonized" war, ist die Verwendung der.

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

Um den Text in einer Schaltfläche zu ändern, führen Sie einfach die folgende Zeile von jQuery for aus

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

benutzen

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

während für

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

benutze das

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

35
Sangeet Menon

Verwenden Sie .val()

Hier ist ein Link zu JSfiddle

32
rsplak

Sie müssen .button("refresh") tun

HTML:

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

JS:

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

Wenn Sie Ihren Button gedrückt haben, scheint das zu funktionieren:

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

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

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

9
i_emmanuel

Sie können so etwas verwenden:

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

Sie können auch zusätzliche Eigenschaften wie diese hinzufügen:

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

Sie können verwenden

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

obwohl

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

würde auch funktionieren, aber es ist irreführend (es vermittelt den Eindruck, dass Sie so etwas schreiben könnten) 

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

aber das kannst du natürlich nicht

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

es ist Arbeit für mich html:

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

js

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

Haben Sie Ihrem Button statt einer ID eine Klasse gegeben? Versuchen Sie den folgenden Code

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

Das sollte den Trick tun:

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

Ändern des Namens der Schaltfläche Etikette in C #.

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

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

});
0
Feng

das ist genau richtig, das funktioniert für mich;

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

sind Sie sicher, dass Jquery verfügbar ist und Ihr Code sich an der richtigen Stelle befindet?

0
John Beynon