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" />
Select all the buttons and store in a variable using the querySelectorAll() method. let buttonList = document. querySelectorAll("button"); buttonList variable returns a nodeList that represents all the buttons.
jQuery val() Method The val() method returns or sets the value attribute of the selected elements. When used to return value: This method returns the value of the value attribute of the FIRST matched element.
Use the jQuery . text() method with the button element to grab the text value contained within. (e.g. The text between the open <button> and close </button> tags.)
val() method is primarily used to get the values of form elements such as input , select and textarea . When called on an empty collection, it returns undefined . When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With