An old problem with IE is that you can't set the name attribute on form elements in the DOM directly. Fortunately there is a workaround to this issue using IE's mergeAttributes method. By creating a temporary named element acceptable by IE's createElement method, you can merge the name attribute into the element you desire, allowing you to name or rename an element. An example demo follows.
var setName = function(el, newName) {
el = (typeof el === "string") ? document.getElementById(el) : el;
el.name = newName;
if (/*@cc_on!@*/0) { // Internet Explorer test (needs to be modified for IE8)
el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
}
};
In Mootools 1.2.1:
var setName = function(elementId, newName) {
var el = (!!elementId) ? $(elementId) : null;
if (!elementId || !newName || !el) return;
el.set({ "name" : newName });
if (Browser.Engine.trident4 || Browser.Engine.trident5) {
el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
}
};
Demo:
Before OUTERHTML:
<INPUT id=renameTarget value="Set Random Name" type=submit>