When I was working on TV.com\’s redesign, I found an error when setting or getting a form element\’s properties in IE. The other browsers was able to set or get the property just fine. So I\’m going to share my solution with you today. I\’ll go over the methods MooTools has first so you know what I was doing.
MooTools Set or Get
MooTools has two sets of methods when setting or getting an elements properties.
You can use the set() or get() method like so:
//Element Method: set
$(\'anchor_id\').set(\'href\', \'http://www.testurl.com\'); // sets the element\'s href
//Element Method: get
$(\'anchor_id\').get(\'href\'); // returns the element\'s href as a string
Or you can use setProperty() or getProperty() methods:
//Element Method: setProperty
$(\'anchor_id\').setProperty(\'href\', \'http://www.testurl.com\'); // sets the element\'s href
//Element Method: getProperty
$(\'anchor_id\').getProperty(\'href\'); // returns the element\'s href as a string
Note: There\’s also methods to set/get more than one property and remove property(s) using:
Error Up Ahead!
The problem I came across was when I wanted to set or get a form elements property in IE. If the form element contained an element with a name property that is the same as the form elements property name then an error would occur. Here\’s the code example:
HTML:
Javascript:
var form = $(\'test_form\');
// grab the element
var get_action = form.get(\'action\');
// IE returns null, others return the url as a string
var getProperty_action = form.getProperty(\'action\');
// IE returns null, others return the url as a string
Eureka: The Solution!
The only way I could find around this was to use Javascripts native method when dealing with DOM elements. Take a look at this code:
var form = $(\'test_form\');
// grab the element
var get_action = form.getAttributeNode(\'action\').nodeValue;
// IE, and the other browsers, returns the url as a string
Now you just need to remember not to name your child nodes the same name as the name of the parent form elements property so you can continue to use MooTools method, or use the native method.
Wow! VERY useful for me to know – thanks! I hope that is finding its way into Mootools 1.3! Geez. IE, I swear…
Oh my holy hell… thank you.
Thanks for this solution. As a proper integration, I have added this to my iefix, as an addition to mooTools 1.2:
Element.implement({getProperty: function(attribute)
{
var EA = Element.Attributes, key = EA.Props[attribute];
if (this.tagName == 'FORM')
var value = (key) ? this[key] : this.getAttributeNode(attribute).nodeValue;
else
var value = (key) ? this[key] : this.getAttribute(attribute, 2);
return (EA.Bools[attribute]) ? !!value : (key) ? value : value || null;
}
});
I also noticed a problem if you try to change the type of a type=”passowrd” field to type=”text” using .set()
All id/name attributes were unique and didnt match an attribute name (like in the action example)
Im guessing its a security thing in IE but it causes an error if using the debugger it says the error is in mootools even tho it clearly isnt since .set() work for everything else in IE.
Firefox had no problem changing type=”password” to type=”text”
@Rhys Burnie:
I came across this problem while trying to display a password input’s default value as text to inform the visitor where to type their password, like “Type Password Here”. With Javascript available, I could easily switch the input from text to password once the visitor began typing.
Like you said, this occured because of IE’s security “feature”. Switching a password inputs type from “password” to anything else will be denied. The error you experienced only appeared through MooTools because a function executed by the .set() method most likely returned an unexpected value.
To get around this you can use my Text Overlay Class or MooTools-More 1.2.3.1 OverText Class. Mine was inspired by MooTools-More’s version, just lighter weight.
Just before I was ready to grab a rock and smash my machine into 100,000 little tiny pieces, I found your post…
I love it when sh*t like that happens.
GREAT POST!
Die IE6
@Roark: Glad you found it, and not a rock in your machine. 🙂
Thanks for the suggestion.It helped me a lot!!
There is one more problem I am facing.
I have an Image in Div tag and in javascript I want to get the coordinates of the image relative to div
I am using MooTools(1.2.3) Library
The code is working in ff and crome but not in IE
The Error is at the below line
InputTopID.setAttribute(‘value’,ImgID.getCoordinates(DivID).top);
where ImdID is image.
DivID is Div(100px by 100px)
InputTopID is a Hidden field.
getCoordinates method does not work with ImgID
Can anyone help?
@Bharati, glad I could help. If you need help, drop by the #mootools IRC chatroom. Myself and others will be able to assist you there.
“God Save this Post”
8QTLve http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
Finally! I thank God for you!
Though – I experienced the same problem getting the title-attribute from an option-element. And as far as I’m concerned I have no ‘title’ element wrapped inside the option-dito…
Anyhoo – thank you for this sweet solution!
(Yet ‘everybody’ ‘should’ know that you should revert to core js when the moo fails… OR perhaps more correctly put: when IE f*cks w/ you)
IE6789 – die.
@Computer Monkey: I’m glad this helped you out. And thanks for the info on the option element.
I got a link to your website from Themelis Cuiper’s SocialGarden Biz case studies of seo & advertising, you must be doing an excellent job as he is pointing towards you! b-)
var get_action = $(‘test_form’).getAttribute(‘action’);