How do you change 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');
Answer: Use the jQuery prop() and html() Methods You can simply use the jQuery prop() method to change the text of the buttons built using the HTML <input> element, whereas to change the text of the buttons which are created using the <button> element you can use the html() method.
To change the button text, first we need to access the button element inside the JavaScript by using the document. getElementById() method and add a click event handler to the button, then set it's value property to blue . Now, when we click on our button , it changes the value from Red to Blue or vice versa.
With jQuery, you can use the . val() method to set values of the form elements. To change the value of <input> elements of type button or type submit (i.e., <input type="button"> or <input type="submit"> ), you can do like: JS.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With