This is basically a JavaScript related bleg/comment. The Prototype JavaScript framework attaches a useful function to form elements, getValue, which does exactly what you’d expect. It also has a convenient shorthand form, $F(), which does the same thing, given the DOM ID of a form element.
Unfortunately, thinks break down when you start dealing with the antiquated Internet Explorer 5.5. When Prototype tries to grab the value associated with a select list, it checks for the presence of the value attribute in the option tag, and if it can’t find it, it returns the contents of the option tag.
Prototype provides a method called hasAttribute, which is included to make up for deficiencies in the DOM implementation in Internet Explorer 6 and 7. It ends with this line:
return $(element).getAttributeNode(attribute).specified;
Unfortunately, Internet Explorer 5.5 also doesn’t support the getAttributeNode method, either, so $F() won’t work in Internet Explorer 5.5 (for select lists, anyway).
I guess the easiest solution is to just skip Prototype in this case and grab the value of the select list manually. You can grab the value of the field like this:
$(‘mySelectList’).options[$(‘mySelectList’).selectedIndex].value
This works fine for my page, but obviously it’s not generic. mySelectList must be a select list, and I have to be using value attributes in my options for this to work. I can’t help but wonder if there’s a more elegant approach that could be integrated into Prototype.
April 30, 2007 at 4:59 pm
I recently ran across the same thing in IE 5.5 using prototype.js 1.5, and I came up with the following solution (I’ve shown the entire simulated hasAttribute method here):
Element.Methods.Simulated = { hasAttribute: function(element, attribute) { var t = Element._attributeTranslations; attribute = t.names[attribute] || attribute; var e = $(element); if (e.getAttributeNode) { var n = e.getAttributeNode(attribute); return n ? n.specified : false; } else { return e.getAttribute(attribute) ? true : false; } } };My change is to add the if/else. First, use feature detection to check if getAttributeNode is supported, and if it is then use it. Otherwise, simply see if the attribute is present using getAttribute, which is supported in IE 5.5, and return true or false accordingly. This works for my situation, and is a generic solution that implements what hasAttribute should do (from my understanding).
I also fixed a bug in this method where the call you point out in your post will fail if getAttributeNode() returns undefined, since the code attempts to check the “specified” property of an undefined result. Note that this is fixed in prototype 1.5.1. See the 1.5.1_rc4 changelog for details, searching for “hasAttribute”.
If you’re interested in general IE 5.5 issues with prototype 1.5, also check out this getElementsByTagName(‘*’) issue. I used the fix offered in this ticket and it seems to work fine from my testing.
April 30, 2007 at 5:49 pm
That’s very useful, thanks!
November 28, 2007 at 4:37 pm
Just bumped into this issue myself. Thanks very much for blogging this.
June 2, 2008 at 7:45 am
Is where any prototype library work with select tags?