How to change the text of a button in jQuery

Question

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

User · Answer

Use  val    Here s a link to JSfiddle

User · Answer

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  lt b gt now lt  b gt       but of course you can t

User · Answer

To change the text in of a button simply execute the following line of jQuery for   lt input type  button  value  XYZ  id  btnAddProfile  gt   use      btnAddProfile   val  Save      while for   lt button id  btnAddProfile  gt XYZ lt  button gt   use this      btnAddProfile   html  Save

User · Answer

Have you gave your button a class instead of an id  try the following code      btnSave   attr  value    Save

User · Answer

x000D   x000D    document  ready function    x000D          button   click function    x000D             p   toggle    x000D   x000D      if  this value   Add   this value    Save   x000D      else this value    Add   x000D   x000D        x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt input type  button  value  Add  id  btnAddProfile  gt  x000D   x000D   lt p gt This is a paragraph with little content  lt  p gt  x000D   lt p gt This is another small paragraph  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

btnviewdetails   click function        if   this  val     hide details                detailedoutput   show              this  val  hide details         else              detailedoutput   hide              this  val  view more details

User · Answer

Depends on what type of button you are using   lt input type  button  value  Add  id  btnAddProfile  gt      btnAddProfile   attr  value    Save      versions older than 1 6   lt input type  button  value  Add  id  btnAddProfile  gt      btnAddProfile   prop  value    Save      versions newer than 1 6   lt  -- Different button types-- gt    lt button id  btnAddProfile  type  button  gt Add lt  button gt      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

User · Answer

If you have button ed your button this seems to work    lt button id  button  gt First caption lt  button gt       button   button     make it nice var text  new caption       button   children   first   html text

User · Answer

it s work for me html    lt button type  button  class  btn btn-primary  id  btnSaveSchedule  gt abc lt  button gt    js      btnSaveSchedule   text  new value

User · Answer

btnAddProfile    on   click  function event          event target   html   Save

User · Answer

btnAddProfile   click function            btnAddProfile   attr  value    Save

User · Answer

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    lt button id  thebutton  gt     lt span class  ui-button-text  gt My Text lt  span gt   lt  button gt    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

User · Answer

You need to do  button  refresh    HTML     lt button id  btnviewdetails  type  button  gt SET lt  button gt    JS        btnviewdetails   text  Save   button  refresh

User · Answer

This should do the trick       btnAddProfile   prop  value    Save               btnAddProfile   button  refresh

User · Answer

document getElementById  btnAddProfile   value  Save

User · Answer

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

User · Answer

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

User · Answer

Changing name of the button etiquette in C     lt button type  submit  name  add  id  btnUpdate  class  btn btn-primary  runat  server  onserverclick  btnUpdate Click  gt  Add     btnUpdate   InnerText      Update

User · Answer

btnAddProfile   html  Save   button  refresh

User · Answer

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

User · Answer

btnAddProfile   text  Save

[jquery] How to change the text of a button in jQuery?

Examples related to jquery

Examples related to jquery-ui