Wie ändere ich den Text einer Schaltfläche in jQuery?

548

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

$("#btnAddProfile").attr('value', 'Save');
user517406
quelle
3
Eigentlich sollte Ihr Beispiel funktionieren, um den Wert der Schaltfläche zu ändern. Ich habe es versucht und es hat funktioniert. Möglicherweise ist die ID der Schaltfläche anders oder ein Tippfehler.
mjspier
Funktioniert immer noch nicht ... könnten JQuery-UI-Stile dies verursachen?
user517406
4
Sergeys Antwort war am besten. Es funktioniert ordnungsgemäß mit jquery-Schaltflächen, ohne dass Stile, Auffüllungen und Ränder entfernt werden.
AaA
benutze dieses $ ("# btnAddProfile"). prop ('value', 'Save');
PHP-Entwickler

Antworten:

899

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

Ihr Button könnte auch ein Link sein. Sie müssen HTML-Code veröffentlichen, um eine genauere Antwort zu erhalten.

BEARBEITEN : Diese funktionieren .click()natürlich, vorausgesetzt, Sie haben sie in einen Anruf eingebunden

BEARBEITEN 2 : Neuere jQuery-Versionen (ab> 1.6) verwenden .propeher als.attr

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

JohnP
quelle
7
Wenn es mit .html ('Speichern') funktioniert, habe ich nicht bemerkt, dass ich runat = server auf meiner Schaltfläche festgelegt habe. Dies hat das Problem verursacht.
user517406
Wie kann ich das zum Laufen bringen und meine jquery ui-Taste nicht schrumpfen lassen?
Sevenearths
2
Mach dir keine Sorgen. Ich habe von buttonzu inputgeändert und die Symbole geändert, anstatt mit dem Text herumzuspielen. (Ich nehme an, etwas sollte nicht sein)
Sevenearths
8
Ich würde dies ablehnen, wenn ich könnte, da es in einigen Fällen den Stil durcheinander bringt. Bitte verwenden Sie die Antwort von DaveUK, wenn Sie Probleme mit dieser haben . PS: Ich denke, das ist es auch, was Sevenearths bemerkt hat
user562529
3
Noch besser: Verwenden Sie die Antwort von Sergey unten für die ordnungsgemäße Verwendung von jQuery und die Zukunftssicherung: $ (".selector") .button ("Option", "Label", "Neuer Text");
cincodenada
148

Für Schaltflächen, die mit .Button () in jQuery erstellt wurden ........

Während die anderen Antworten den Text ändern, wird das Design der Schaltfläche durcheinander gebracht. Es stellt sich jedoch heraus, dass beim Rendern einer jQuery-Schaltfläche der Text der 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 tatsächlich den Text innerhalb des SPAN-Tags und NICHT die TASTE ändern!

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

oder (wenn es wie ich bei einem Klickereignis gemacht wird)

$("span", this).text("My NEW Text");
DaveUK
quelle
4
Sie sollten nicht erwarten, dass sich diese DOM-Struktur niemals ändert. Weitaus besser ist es, die Methode zu verwenden, mit der Sie mit jQuery-UI die Bezeichnung ändern können (siehe Sergeys Antwort).
Mike DeSimone
80

Die korrekte Methode zum Ändern des Schaltflächentextes, wenn er mit JQuery "geknöpft" wurde, ist die Verwendung der Methode .button ():

$( ".selector" ).button( "option", "label", "new text" );
Sergey
quelle
3
Dies funktionierte für mich besser als die anderen Ansätze, die sich auf das Styling der Schaltfläche (insbesondere die Größe der Schaltfläche) auswirkten. Ich habe eine Schaltfläche in einem jQuery-UI-Dialogfeld (FWIW) verwendet.
Dave Crumbacher
8
Dies ist die richtige Antwort für Schaltflächen, die mit jQuery erstellt wurden, z. B. in einem Dialogfeld. Alle anderen zerstören einen Teil des jQuery-Stils. Dies geschieht auch ohne Abhängigkeit von der von jQuery generierten HTML-Struktur, die zukunftssicherer ist.
cincodenada
Dies ist die richtige Antwort auf diese Frage (anscheinend handelt es sich bei der Frage um Jquery-UI-Schaltflächen, siehe Kommentare). Sie sollte beworben werden.
Peveuve
38

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

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

verwenden

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

während für

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

benutze das

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

Sangeet Menon
quelle
Für Schaltflächen, die von jquery mit z. B. erstellt wurden $('#thing').append($("<button />")....), müssen Sie .html verwenden, um den Text festzulegen .
Benubird
22

Du musst tun .button("refresh")

HTML :

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

JS :

$('#btnviewdetails').text('Save').button("refresh");
user1464277
quelle
Aus irgendeinem Grund würde es für mich nur funktionieren, nachdem ich Ihren Code zum Aktualisieren der Schaltfläche verwendet habe, aber ich habe auch festgestellt, dass das Symbol auf der Schaltfläche (Teil von JQuery Mobile CSS) nach dem Aktualisieren verloren geht (obwohl Ihre Lösung am nächsten war Ich habe).
Ciaran Gallagher
12

Wenn Sie Ihren Knopf geknöpft haben, scheint dies zu funktionieren:

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

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

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

i_emmanuel
quelle
10

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');
PurplePier
quelle
Funktioniert nicht Eingabeschaltflächen oder Senden-Schaltflächen, verwenden Sie val ()
ActiveX
8

Sie können verwenden

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

obwohl

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

würde auch funktionieren, aber es ist irreführend (es gibt den Eindruck, man könnte so etwas schreiben

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

aber natürlich kannst du nicht

gotofritz
quelle
6
document.getElementById('btnAddProfile').value='Save';
Curtisk
quelle
5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
Sauerburger
quelle
10
Das Wiederholen des nicht funktionierenden Codes aus der Frage ist keine Antwort.
Benubird
4

es ist Arbeit für mich html:

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

js

$("#btnSaveSchedule").text("new value");
Grauer Wolf
quelle
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
quelle
2

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

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

});
Feng
quelle
Geben Sie einige Details zu Ihrer Antwort an.
Starx
Bitte fügen Sie Ihrer Antwort Details bei. Ich habe keine Ahnung, was Sie hier versuchen.
Anurag
1

Dies sollte den Trick tun:

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

das ist genau richtig, das funktioniert bei mir;

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

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

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

Ändern des Namens der Tastenetikette in C #.

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

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