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:

Answer 1

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>

Answer 2

try this for your button:

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

Answer 3

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.

Answer 4

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

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

Answer 5

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>

Answer 6

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