Using jQuery to Overcome IE Button Value Bug
Issue: In IE 6 & 7, the text of a button element is returned in jQuery using .val() or .attr('value'), instead of the button's actual value. This is a known issue and it also occurs with straight Javascript using .value. There was a previous discussion on it here:
Retrieve Button value with jQuery
but an acceptable total solution was never found (only a hack where the button's text is temporarily hidden).
I have been working on a total solution so that whenever a button's value is accessed (be it on form submit or even just using jQuery/Javascript), the proper value is returned. I have it working with .val() with the below code. I am seeking help with getting it to also work using .attr('value'), and even with straight Javascript .value if possible.
I have set up a JSfiddle page where it can be seen in action here:
http://jsfiddle.net/hyperseer/RVyDN/2/
Code:
$(document).ready(function(){
$().iefixer();
});
(function($){
$.fn.iefixer = function(){
$.fn.origval = $.fn.val;
$.fn.val = function(value){
var elem = thi开发者_运维技巧s[0];
if(value === undefined){
var returnVal = null;
if( elem.nodeName.toLowerCase() == 'button' )
{
returnVal = elem.getAttributeNode("value").nodeValue;
} else {
returnVal = $(elem).origval();
}
return returnVal;
} else {
if( elem.nodeName.toLowerCase() == 'button' )
{
elem.getAttributeNode("value").nodeValue = value;
} else {
$(elem).origval(value);
}
}
}
$('button').click( function() {
alert( "$(this).val() = " + $(this).val() ); // this works now with above fix
alert( "$(this).attr('value') = " + $(this).attr('value') ); // doesn't work
alert( "this.value = " + this.value ); // straight JS doesn't work
});
};
})(jQuery);
UPDATE:
I've now got it working with both the .val() and .attr('value') functions using the following code:
$(document).ready(function(){
$().iefixer();
});
(function($){
$.fn.iefixer = function(){
var ie = $.browser.msie;
var ver = $.browser.version;
if ( ie && ver<=7 ) {
$.fn.origval = $.fn.val;
$.fn.val = function(value){
var elem = this[0];
if(value === undefined){
var returnVal = null;
if( elem.nodeName.toLowerCase() == 'button' )
{
returnVal = elem.getAttributeNode("value").nodeValue;
} else {
returnVal = $(elem).origval();
}
return returnVal;
} else {
if( elem.nodeName.toLowerCase() == 'button' )
{
elem.getAttributeNode("value").nodeValue = value;
} else {
$(elem).origval(value);
}
}
}
var originalAttr = $.fn.attr;
$.fn.attr = function(name, val) {
if (this[0].nodeName.toLowerCase() == 'button' && val === undefined) return $(this).val();
return originalAttr.apply(this, arguments);
}
}
};
})(jQuery);
An improvement to Al. code, in order to make attr() function working with other value than 'value':
var originalAttr = $.fn.attr;
$.fn.attr = function (name, val) {
if (name === 'value' && this[0].nodeName.toLowerCase() == 'button' && val === undefined) return $(this).val();
return originalAttr.apply(this, arguments);
}
for ie9 you need to check:
if (elem.getAttributeNode("value") != undefined) { // code };
精彩评论