Retrieve Button value with jQuery

Question

A simple one  I m trying to retrieve the value attribute of a button when its been pressed using jQuery  here s what I have    lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  val                          lt  script gt    lt button class  my button  name  buttonName  value  buttonValue  gt      Button Label lt  button gt    In Firefox my alert displays  buttonValue  which is great but in IE7 it displays  Button Label    What jQuery should I use to always get the button s value   Or should I be using a different approach   Many thanks   ANSWER  I m now using   lt input class  my button  type  image  src  whatever png  value  buttonValue    gt

User · Accepted Answer

I know this was posted a while ago  but in case anyone is searching for an answer and really wants to use a button element instead of an input element     You can not use  attr  value   or  val   with a button in IE  IE reports both the  val   and  attr  value   as being the text label  content  of the button element instead of the actual value of the value attribute   You can work around it by temporarily removing the button s label   var getButtonValue   function  button        var label    button text          button text          var buttonValue    button val         button text label       return buttonValue      There are a few other quirks with buttons in IE  I have posted a fix for the two most common issues here

User · Answer

You can also use the new HTML5 custom data- attributes    lt script type  text javascript  gt    document  ready function             my button   click function             alert   this  attr  data-value                  lt  script gt    lt button class  my button  name  buttonName  data-value  buttonValue  gt Button Label lt  button gt

User · Answer

if you want to get the value attribute  buttonValue  then I d use    lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt

User · Answer

if you want to get the value attribute  buttonValue  then I d use    lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt

User · Answer

Button does not have a value attribute  To get the text of button try       my button   click function          alert   this  html

User · Answer

Inspired by postpostmodern I have made this  to make  val   work throughout my javascript code   jQuery function           if   browser msie               Fixes a know issue  that buttons value is overwritten with the text             Someone with more jQuery experience can probably tell me            how not to polute jQuery fn here          jQuery fn  orig val   jQuery fn val          jQuery fn val   function value                var elem     this               var html             if elem attr  type       button                        if button  hide button text while getting val                   html   elem html                   elem html                                  Use original function             var result   elem  orig val value               if elem attr  type       button                     elem html html                            return result                       It does however  not solve the submit problem  solved by postpostmodern  Perhaps this could be included in postpostmodern s solution here  http   gist github com 251287

User · Answer

Give the buttons a value attribute and then retrieve the values using this      button   click function      var value   this  attr  value

User · Answer

Button does not have a value attribute  To get the text of button try       my button   click function          alert   this  html

User · Answer

As a button value is an attribute you need to use the  attr   method in jquery  This should do it   lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt    You can also use attr to set attributes  more info in the docs   This only works in JQuery 1 6   See postpostmodern s answer for older versions

User · Answer

As a button value is an attribute you need to use the  attr   method in jquery  This should do it   lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt    You can also use attr to set attributes  more info in the docs   This only works in JQuery 1 6   See postpostmodern s answer for older versions

User · Answer

As a button value is an attribute you need to use the  attr   method in jquery  This should do it   lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt    You can also use attr to set attributes  more info in the docs   This only works in JQuery 1 6   See postpostmodern s answer for older versions

User · Answer

As a button value is an attribute you need to use the  attr   method in jquery  This should do it   lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt    You can also use attr to set attributes  more info in the docs   This only works in JQuery 1 6   See postpostmodern s answer for older versions

User · Answer

try this for your button    lt input type  button  class  my button  name  buttonName  value  buttonValue    gt

User · Answer

Inspired by postpostmodern I have made this  to make  val   work throughout my javascript code   jQuery function           if   browser msie               Fixes a know issue  that buttons value is overwritten with the text             Someone with more jQuery experience can probably tell me            how not to polute jQuery fn here          jQuery fn  orig val   jQuery fn val          jQuery fn val   function value                var elem     this               var html             if elem attr  type       button                        if button  hide button text while getting val                   html   elem html                   elem html                                  Use original function             var result   elem  orig val value               if elem attr  type       button                     elem html html                            return result                       It does however  not solve the submit problem  solved by postpostmodern  Perhaps this could be included in postpostmodern s solution here  http   gist github com 251287

User · Answer

lt  DOCTYPE html gt    lt html gt    lt head gt     lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt    lt  script gt    lt script gt     document  ready function           hide   click function           p   toggle         var x       hide   text           if x   Hide             button   html  show                  else                 button   html  Hide                                     lt  script gt     lt  head gt     lt body gt     lt p gt If you click on the  Hide  button  I will disappear  lt  p gt     lt button id  hide  gt Hide lt  button gt       lt  body gt    lt  html gt

User · Answer

if you want to get the value attribute  buttonValue  then I d use    lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt

User · Answer

try this for your button    lt input type  button  class  my button  name  buttonName  value  buttonValue    gt

User · Answer

try this for your button    lt input type  button  class  my button  name  buttonName  value  buttonValue    gt

User · Answer

Give the buttons a value attribute and then retrieve the values using this      button   click function      var value   this  attr  value

User · Answer

if you want to get the value attribute  buttonValue  then I d use    lt script type  text javascript  gt        document  ready function                 my button   click function                 alert   this  attr  value                          lt  script gt

User · Answer

You can also use the new HTML5 custom data- attributes    lt script type  text javascript  gt    document  ready function             my button   click function             alert   this  attr  data-value                  lt  script gt    lt button class  my button  name  buttonName  data-value  buttonValue  gt Button Label lt  button gt

User · Answer

lt  DOCTYPE html gt    lt html gt    lt head gt     lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt    lt  script gt    lt script gt     document  ready function           hide   click function           p   toggle         var x       hide   text           if x   Hide             button   html  show                  else                 button   html  Hide                                     lt  script gt     lt  head gt     lt body gt     lt p gt If you click on the  Hide  button  I will disappear  lt  p gt     lt button id  hide  gt Hide lt  button gt       lt  body gt    lt  html gt

User · Answer

try this for your button    lt input type  button  class  my button  name  buttonName  value  buttonValue    gt

[jquery] Retrieve Button value with jQuery

Examples related to jquery