How to change the text of a button in jQuery?
How do you change开发者_StackOverflow社区 the text value of a button in jQuery? Currently, my button has 'Add' as its text value, and upon being clicked I want it to change to 'Save'. I have tried this method below, but so far without success:
$("#btnAddProfile").attr('value', 'Save');
Depends on what type of button you are using
<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');
Your button could also be a link. You'll need to post some HTML for a more specific answer.
EDIT : These will work assuming you've wrapped it in a .click() call, of course
EDIT 2 : Newer jQuery versions (from > 1.6) use .prop rather than .attr
EDIT 3 : If you're using jQuery UI, you need to use DaveUK's method (below) of adjusting the text property
For buttons created with .Button() in jQuery........
Whilst the other answers will change the text they will mess up the styling of the button, it turns out that when a jQuery button is rendered the text of the button is nested within a span e.g.
<button id="thebutton">
<span class="ui-button-text">My Text</span>
</button>
If you remove the span and replace it with text (as in the other examples) - you'll loose the span and associated formatting.
So you actually need to change the text within the SPAN tag and NOT the BUTTON!
$("#thebutton span").text("My NEW Text");
or (if like me it's being done on a click event)
$("span", this).text("My NEW Text");
The correct way of changing the button text if it was "buttonized" using JQuery is to use .button() method:
$( ".selector" ).button( "option", "label", "new text" );
To change the text in of a button simply execute the following line of jQuery for
<input type='button' value='XYZ' id='btnAddProfile'>
use
$("#btnAddProfile").val('Save');
while for
<button id='btnAddProfile'>XYZ</button>
use this
$("#btnAddProfile").html('Save');
Use .val()
Here's a link to JSfiddle
You need to do .button("refresh")
HTML :
<button id='btnviewdetails' type='button'>SET</button>
JS :
$('#btnviewdetails').text('Save').button("refresh");
You can use something like this:
$('#your-button').text('New Value');
You can also add extra properties like this:
$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');
$("#btnAddProfile").text("Save");
If you have button'ed your button this seems to work:
<button id="button">First caption</button>
$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);
You can use
$("#btnAddProfile").text('Save');
although
$("#btnAddProfile").html('Save');
would work as well, but it's misleading (it gives the impression you could write something like
$("#btnAddProfile").html('Save <b>now</b>');
but of course you can't
it's work for me html:
<button type="button" class="btn btn-primary" id="btnSaveSchedule">abc</button>
js
$("#btnSaveSchedule").text("new value");
$("#btnAddProfile").click(function(){
$("#btnAddProfile").attr('value', 'Save');
});
document.getElementById('btnAddProfile').value='Save';
$(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>Have you gave your button a class instead of an id? try the following code
$(".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');
}
});
This should do the trick:
$("#btnAddProfile").prop('value', 'Save');
$("#btnAddProfile").button('refresh');
$("#btnAddProfile").html('Save').button('refresh');
that's exactly correct, this works for me;
$('#btnAddProfile').bind('click',function(){
$(this).attr('value','save');
})
are you sure Jquery is available and that your code is in the correct place?
$( "#btnAddProfile" ).on( "click",function(event){
$( event.target ).html( "Save" );
});
Changing name of the button etiquette in C#.
<button type="submit" name="add" id="btnUpdate" class="btn btn-primary" runat="server" onserverclick="btnUpdate_Click">
Add
btnUpdate.**InnerText** = "Update";
加载中,请稍侯......
精彩评论