Retrieve Button value with jQuery

Jquery Problem Overview

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:

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).val());
        });
    });
</script>

<button class="my_button" name="buttonName" value="buttonValue">
    Button Label</button>

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

<input class="my_button" type="image" src="whatever.png" value="buttonValue" />

Jquery Solutions

Solution 1 - Jquery

As a button value is an attribute you need to use the .attr() method in jquery. This should do it

<script type="text/javascript">
	$(document).ready(function() {
		$('.my_button').click(function() {
			alert($(this).attr("value"));
		});
	});
</script>

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.

Solution 2 - Jquery

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.

Solution 3 - Jquery

Button does not have a value attribute. To get the text of button try:

$('.my_button').click(function() {
     alert($(this).html());
});

Solution 4 - Jquery

You can also use the new HTML5 custom data- attributes.

<script type="text/javascript">
$(document).ready(function() {
    $('.my_button').click(function() {
        alert($(this).attr('data-value'));
    });
});
</script>

<button class="my_button" name="buttonName" data-value="buttonValue">Button Label</button>

Solution 5 - Jquery

Give the buttons a value attribute and then retrieve the values using this:

$("button").click(function(){
  var value=$(this).attr("value");
});

Solution 6 - Jquery

try this for your button:

<input type="button" class="my_button" name="buttonName" value="buttonValue" />

Solution 7 - Jquery

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

Solution 8 - Jquery

if you want to get the value attribute (buttonValue) then I'd use:

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).attr('value'));
        });
    });
</script>

Solution 9 - Jquery

 <!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   $("#hide").click(function(){
    $("p").toggle();
    
    var x = $("#hide").text();
   
      if(x=="Hide"){
      $("button").html("show");
    
      }
     else 
     {
     $("button").html("Hide");
    
      }
    
       });

   });

  </script>
  </head>
  <body>

 <p>If you click on the "Hide" button, I will disappear.</p>

 <button id="hide">Hide</button>



 </body>
 </html>

Content Type	Original Author	Original Content on Stackoverflow
Question	Simon Hutton	View Question on Stackoverflow
Solution 1 - Jquery	Neil Aitken	View Answer on Stackoverflow
Solution 2 - Jquery	postpostmodern	View Answer on Stackoverflow
Solution 3 - Jquery	Mandeep Pasbola	View Answer on Stackoverflow
Solution 4 - Jquery	krichard	View Answer on Stackoverflow
Solution 5 - Jquery	mansoor.khan	View Answer on Stackoverflow
Solution 6 - Jquery	Natrium	View Answer on Stackoverflow
Solution 7 - Jquery	sbglasius	View Answer on Stackoverflow
Solution 8 - Jquery	Wayne Austin	View Answer on Stackoverflow
Solution 9 - Jquery	vlass	View Answer on Stackoverflow