Как изменить текст кнопки в jQuery?

548

Как вы измените текстовое значение кнопки в jQuery? В настоящее время моя кнопка имеет «Добавить» в качестве текстового значения, и после нажатия я хочу, чтобы она изменилась на «Сохранить». Я попробовал этот метод ниже, но пока безуспешно:

$("#btnAddProfile").attr('value', 'Save');
user517406
источник
3
на самом деле ваш пример должен работать, чтобы изменить значение кнопки. Я попробовал, и это сработало. Может быть, идентификатор кнопки отличается или опечатка.
mjspier
Все еще не работает ... могут ли стили JQuery UI вызывать это?
user517406
4
Ответ Сергея был лучшим. он работает правильно на кнопках jquery, не удаляя его стили, отступы и поля.
AaA
используйте этот $ ("# btnAddProfile"). prop ('value', 'Save');
Php разработчик

Ответы:

899

Зависит от того, какой тип кнопки вы используете

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

Ваша кнопка также может быть ссылкой. Вам нужно будет опубликовать HTML для более конкретного ответа.

РЕДАКТИРОВАТЬ : они будут работать, если вы .click(), конечно, завернули его в вызов

РЕДАКТИРОВАТЬ 2 : использование более новых версий jQuery (от> 1.6).prop а не.attr

РЕДАКТИРОВАТЬ 3 : Если вы используете JQuery UI, вам нужно использовать метод DaveUK ( ниже ) для настройки свойства текста

JohnP
источник
7
Работал с использованием .html («Сохранить»), я не заметил, что на моей кнопке установлен runat = server, именно это и стало причиной проблемы.
user517406
В любом случае, я могу заставить это работать, и это не сжимает мою кнопку jquery ui?
Семь Земель
2
не беспокойся об этом Я изменил с buttonна inputи изменил круглые значки вместо того, чтобы возиться с текстом. (Я полагаю, что-то не должно было быть)
Семь Земель
8
Я бы понизил это, если бы мог, поскольку в некоторых случаях это портит стиль. Пожалуйста, используйте ответ DaveUK, если у вас есть проблемы с этим . PS: Я думаю, это то, что заметили и
Sevenearths
3
Еще лучше: используйте ответ Сергея ниже для правильного использования jQuery и проверки будущего: $ (".selector") .button ("option", "label", "new text");
Синкоденада
148

Для кнопок, созданных с помощью .Button () в jQuery ........

В то время как другие ответы изменят текст, они испортят стилизацию кнопки, оказывается, что когда рендерится кнопка jQuery, текст кнопки вкладывается в промежуток, например

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

Если вы удалите диапазон и замените его текстом (как в других примерах) - вы потеряете диапазон и соответствующее форматирование.

Таким образом, вам действительно нужно изменить текст внутри тега SPAN, а НЕ КНОПКУ!

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

или (если, как и я, это делается на событии клика)

$("span", this).text("My NEW Text");
DaveUK
источник
4
Вы не должны ожидать, что эта структура DOM никогда не изменится. Гораздо лучше использовать метод, который jQuery-UI дает вам для изменения метки (см. Ответ Сергея).
Майк ДеСимон,
80

Правильный способ изменить текст кнопки, если она была «застегнута» с помощью JQuery, - это использовать метод .button ():

$( ".selector" ).button( "option", "label", "new text" );
Сергей
источник
3
Это сработало для меня лучше, чем другие подходы, которые давили на стиль кнопки (в частности, размер кнопки). Я использовал кнопку в диалоговом окне пользовательского интерфейса jQuery, FWIW.
Дейв Крамбахер,
8
Это правильный ответ для кнопок, созданных с помощью jQuery, таких как кнопки в диалоговом окне. Все остальные будут разрушать некоторые стили JQuery. Это также делает это независимо от HTML-структуры, которую генерирует jQuery, что в большей степени ориентировано на будущее.
Синкоденада
Это правильный ответ на этот вопрос (кажется, вопрос касается кнопок пользовательского интерфейса Jquery, см. Комментарии), его следует продвигать.
Певе
38

Чтобы изменить текст кнопки просто выполните следующую строку jQuery для

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

использование

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

в то время как для

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

использовать этот

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

Сангит Менон
источник
Кроме того, для кнопок, созданных с помощью jquery, например $('#thing').append($("<button />")....), вам нужно использовать .html, чтобы установить текст.
Benubird
22

Вам нужно сделать .button("refresh")

HTML :

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

JS :

$('#btnviewdetails').text('Save').button("refresh");
user1464277
источник
По какой-то причине, это сработало бы только для меня после того, как я использовал ваш код для обновления кнопки, но я также заметил, что значок на кнопке (часть JQuery Mobile CSS) теряется после ее обновления (хотя ваше решение было самым близким Я получил).
Кьяран Галлахер
12

Если вы нажали кнопку, это работает:

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

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);
Gluip
источник
10

Вы можете использовать что-то вроде этого:

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

Вы также можете добавить дополнительные свойства, как это:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
PurplePier
источник
Не работают кнопки ввода или отправки, используйте val ()
ActiveX
8

Ты можешь использовать

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

хотя

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

будет работать также, но это вводит в заблуждение (это создает впечатление, что вы могли бы написать что-то вроде

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

но, конечно, вы не можете

gotofritz
источник
6
document.getElementById('btnAddProfile').value='Save';
curtisk
источник
5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });
SAUERBURGER
источник
10
Повторение нерабочего кода из вопроса не является ответом.
Benubird
4

это работа для меня HTML:

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

JS

$("#btnSaveSchedule").text("new value");
Серый волк
источник
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>

Судхер Коппарапу
источник
2

Вы дали своей кнопке класс вместо идентификатора? попробуйте следующий код

$(".btnSave").attr('value', 'Save');
Николас Мюррей
источник
1
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});
Feng
источник
Включите некоторые детали о вашем ответе.
Starx
Пожалуйста, включите детали в ваш ответ. Я понятия не имею, что вы пытаетесь сделать здесь.
Anurag
1

Это должно сделать трюк:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');
Олле Кланг
источник
1
$("#btnAddProfile").html('Save').button('refresh');
Drastick
источник
0

это абсолютно правильно, это работает для меня;

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

Вы уверены, что Jquery доступен и ваш код находится в правильном месте?

Джон бейнон
источник
0
    $( "#btnAddProfile" ).on( "click",function(event){
    $( event.target ).html( "Save" );
});
Раджеш М. Канойя
источник
0

Меняется название кнопки этикета в C #.

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

btnUpdate.**InnerText** = "Update";
iizquierdo
источник