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" />
This question is related to
jquery
try this for your button:
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
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>
<!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>
Button does not have a value attribute. To get the text of button try:
$('.my_button').click(function() {
alert($(this).html());
});
Give the buttons a value attribute and then retrieve the values using this:
$("button").click(function(){
var value=$(this).attr("value");
});
try this for your button:
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
<!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>
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>
Button does not have a value attribute. To get the text of button try:
$('.my_button').click(function() {
alert($(this).html());
});
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>
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
try this for your button:
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
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.
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
Give the buttons a value attribute and then retrieve the values using this:
$("button").click(function(){
var value=$(this).attr("value");
});
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.
try this for your button:
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
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.
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>
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>
Source: Stackoverflow.com