Jak zmienić tekst przycisku w jQuery?

547

Jak zmienić wartość tekstową przycisku w jQuery? Obecnie mój przycisk ma „Dodaj” jako wartość tekstową, a po kliknięciu chcę zmienić na „Zapisz”. Próbowałem tej metody poniżej, ale jak dotąd bez powodzenia:

$("#btnAddProfile").attr('value', 'Save');
użytkownik517406
źródło
3
tak naprawdę twój przykład powinien działać, aby zmienić wartość przycisku. Próbowałem i zadziałało. Może identyfikator przycisku jest inny lub literówka.
mjspier,
Nadal nie działa ... Czy może to powodować style interfejsu użytkownika JQuery?
user517406
4
Odpowiedź Siergieja była najlepsza. działa poprawnie na przyciskach jquery bez usuwania stylów, dopełnienia i marginesów.
AaA
użyj tego $ („# btnAddProfile”). prop („wartość”, „Zapisz”);
Deweloper php

Odpowiedzi:

897

Zależy od typu używanego przycisku

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

Twój przycisk może być również linkiem. Musisz opublikować trochę HTML, aby uzyskać bardziej szczegółową odpowiedź.

EDYCJA : Będą działać, zakładając .click()oczywiście , że zawarłeś je w rozmowie

EDYCJA 2 : Nowsze wersje jQuery (od> 1.6) używają .propzamiast.attr

EDYCJA 3 : Jeśli używasz jQuery UI, musisz użyć metody DaveUK ( poniżej ) do dostosowania właściwości text

JohnP
źródło
7
Mam działający przy użyciu .html („Zapisz”), nie zauważyłem, że ustawiłem runat = server na moim przycisku, to właśnie powodowało problem.
user517406
W jakikolwiek sposób mogę sprawić, że to zadziała i żeby nie zawijało mojego przycisku interfejsu użytkownika jquery?
Sevenearths
2
nie martw się o to. Zmieniłem z buttonna inputi zmieniłem okrągłe ikony zamiast zadzierać z tekstem. (Przypuszczam, że coś nie miało być)
Sevenearths
8
Głosowałbym za tym, gdybym mógł, ponieważ w niektórych przypadkach zaburza to styl. Proszę skorzystać z odpowiedzi DaveUK, jeśli masz z tym problem . PS: Wydaje mi się, że właśnie to zauważył
Sevenearths
3
Jeszcze lepiej: użyj poniższej odpowiedzi Siergieja, aby właściwie użyć jQuery i zabezpieczenia na przyszłość: $ („.selector”). Przycisk („opcja”, „etykieta”, „nowy tekst”);
cincodenada
148

Dla przycisków utworzonych za pomocą .Button () w jQuery ........

Podczas gdy inne odpowiedzi zmienią tekst, zepsują styl przycisku, okazuje się, że gdy renderowany jest przycisk jQuery, tekst przycisku jest zagnieżdżany w zakresie np.

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

Jeśli usuniesz zakres i zastąpisz go tekstem (jak w innych przykładach) - stracisz zakres i związane z nim formatowanie.

Musisz zmienić tekst w znaczniku SPAN, a NIE PRZYCISK!

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

lub (jeśli tak jak ja, odbywa się to na zdarzeniu kliknięcia)

$("span", this).text("My NEW Text");
DaveUK
źródło
4
Nie należy oczekiwać, że ta struktura DOM nigdy się nie zmieni. Zdecydowanie lepiej jest użyć metody jQuery-UI, która pozwala zmienić etykietę (patrz odpowiedź Siergieja).
Mike DeSimone
80

Prawidłowym sposobem zmiany tekstu przycisku, jeśli został on „przyporządkowany” za pomocą JQuery, jest użycie metody .button ():

$( ".selector" ).button( "option", "label", "new text" );
Siergiej
źródło
3
To działało dla mnie lepiej niż inne podejścia, które naciskały na styl guzika (w szczególności rozmiar guzika). Użyłem przycisku w oknie dialogowym interfejsu użytkownika jQuery, FWIW.
Dave Crumbacher,
8
To jest poprawna odpowiedź dla przycisków utworzonych za pomocą jQuery, takich jak te w oknie dialogowym. Wszystkie pozostałe zniszczą część stylu jQuery. Robi to również bez zależności od struktury HTML generowanej przez jQuery, co jest bardziej przyszłościowe.
cincodenada
To jest prawidłowa odpowiedź na to pytanie (wydaje się, że pytanie dotyczy przycisków interfejsu użytkownika Jquery, patrz komentarze), należy je promować.
peveuve
38

Aby zmienić tekst przycisku, wystarczy wykonać następujący wiersz jQuery dla

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

posługiwać się

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

podczas gdy dla

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

Użyj tego

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

Sangeet Menon
źródło
Ponadto w przypadku przycisków utworzonych za pomocą jquery przy użyciu np. $('#thing').append($("<button />")....)Musisz ustawić plik .html.
Benubird
22

Musisz zrobić .button("refresh")

HTML :

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

JS :

$('#btnviewdetails').text('Save').button("refresh");
użytkownik 1464277
źródło
Z jakiegoś powodu zadziałałoby to tylko po tym, jak użyłem twojego kodu do odświeżenia przycisku, ale zauważyłem również, że ikona na przycisku (część JQuery Mobile CSS) gubi się po odświeżeniu (chociaż twoje rozwiązanie było najbliżej Mam).
Ciaran Gallagher
12

Jeśli przycisk został przypięty do przycisku, wydaje się, że działa:

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

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);
Gluip
źródło
10

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

i_emmanuel
źródło
10

Możesz użyć czegoś takiego:

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

Możesz także dodać dodatkowe właściwości, takie jak to:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
PurplePier
źródło
Nie działa z przyciskami wejściowymi ani przyciskami przesyłania, użyj val ()
ActiveX
8

Możesz użyć

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

mimo że

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

też by działał, ale wprowadza w błąd (daje wrażenie, że można napisać coś takiego

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

ale oczywiście nie możesz

gotofritz
źródło
6
document.getElementById('btnAddProfile').value='Save';
Curtisk
źródło
5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
Sauerburger
źródło
10
Powtórzenie niedziałającego kodu z pytania nie jest odpowiedzią.
Benubird
4

to działa dla mnie html:

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

js

$("#btnSaveSchedule").text("new value");
Szary Wilk
źródło
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
źródło
2

Czy dałeś swojemu guzikowi klasę zamiast identyfikatora? wypróbuj następujący kod

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

});
Feng
źródło
Podaj kilka szczegółów swojej odpowiedzi.
Starx,
w odpowiedzi podaj szczegóły. Nie mam pojęcia, co próbujesz tutaj zrobić.
Anurag
1

To powinno załatwić sprawę:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');
Olle Klang
źródło
1
$("#btnAddProfile").html('Save').button('refresh');
Drastick
źródło
0

to jest dokładnie poprawne, to działa dla mnie;

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

czy jesteś pewien, że Jquery jest dostępna i czy Twój kod znajduje się we właściwym miejscu?

John Beynon
źródło
0
    $( "#btnAddProfile" ).on( "click",function(event){
    $( event.target ).html( "Save" );
});
Rajesh M. Kanojia
źródło
0

Zmiana nazwy etykiety przycisku w C #.

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

btnUpdate.**InnerText** = "Update";
iizquierdo
źródło