Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the text of a button in jQuery?

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'); 
like image 777
user517406 Avatar asked Apr 07 '11 11:04

user517406


People also ask

How to change text of button using jQuery?

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.

How do I change the button text?

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.

How to set value to button in jQuery?

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.


1 Answers

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

like image 50
JohnP Avatar answered Sep 29 '22 10:09

JohnP