Form property set/get error with MooTools in Internet Explorer
Posted on | October 16, 2008 | 5 Comments
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:
<form id="test_form" action="http://www.testurl.com/action_page/" method="post">
<fieldset>
<legend></legend>
<input name="action" type="hidden" value="ajax_call" />
</fieldset>
</form>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.
Comments
5 Responses to “Form property set/get error with MooTools in Internet Explorer”
Leave a Reply
March 31st, 2009 @ 2:54 pm
Wow! VERY useful for me to know – thanks! I hope that is finding its way into Mootools 1.3! Geez. IE, I swear…
July 7th, 2009 @ 1:19 pm
Oh my holy hell… thank you.
July 12th, 2009 @ 2:47 am
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;
}
});
July 28th, 2009 @ 6:19 pm
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”
July 28th, 2009 @ 7:19 pm
@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.