Posted on | October 16, 2008 | 14 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.
//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
//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:
<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>
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!
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.