IE bugs – dynamically creating form elements
by kae verens on Jul.06, 2005, under javascript, web development
I have a few scripts which have forms completely generated by JavaScript. In most browsers, this is fine, but IE, as usual, is “special”.
Look at this code:
var i=document.createElement('input');
i.name='action';
i.value='submit this form';
i.type='submit';
You would expect the above to provide something similar to this HTML:
<input type="submit" name="action" value="submit this form" >
Instead, the final line overwrites the values we’ve set and changes it to:
<input type="submit" name="action" value="Submit Query" >
That is annoying!
To work around that, make sure to set the type first.
var i=document.createElement('input');
i.type='submit';
i.name='action';
i.value='submit this form';
Another thing is multipart/form-data forms. With most browsers, you can create a form with the following code:
var form=document.createElement('form');
form.enctype='multipart/form-data';
form.action='shoppingcart_xhr.php';
form.method='POST';
form.target='shoppingcart_iframe';
The above code will mostly work in IE, except when you actually need to use the multipart aspect of it (uploading a file, for example), when it will barf.
In this case, IE seems to insist on the following crappy code:
form=document.createElement('<form action="shoppingcart_xhr.php" method="POST" enctype="multipart/form-data" target="shoppingcart_iframe">');
This is very annoying, and not friendly to my cross-browser sensibilities. But… at least it’s just the occasional form that needs that crap.
8 Comments for this entry
1 Trackback or Pingback for this entry
-
<iframe> + createAttribute('name') streikt im IE - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
July 31st, 2007 on 8:57 pm[...] this.form.enctype = ‘multipart/form-data’; Hab grade ?ber Google auf Seite 3 oder so (musste wohl noch nie so weit bl?ttern um was zu finden) folgenden Link gefunden: klog ? Blog Archive ? IE bugs – dynamically creating form elements Die L?sung dort, passt mir aber nicht wirklich in den Kram, weil ich bereits ein bestehendes <form> Tag habe, das ich nur noch anpassen will! Wenn es denn unbedingt sein muss, werde ich das bestehende <form> halt mit replaceChild() ersetzen! Falls aber jemand ne bessere L?sung hat, immer her damit @B.Daddel: Nomal thx a lot Gruss [...]
September 2nd, 2005 on 6:01 pm
I’m stuck with this problem too – how do you change enctype using javascript in IE6 for a form that already exists? (Using createElement is not possible). Any help greatly appreciated. You can change enctype no problem in Mozilla but IE6 barfs as you say.
September 3rd, 2005 on 3:25 pm
You might get away with copying the
childNodesof that form into an array, creating a new form with the desiredenctype, then removing the old form, replacing it with the new one, then appending the originalchildNodes.Then again, you may just be screwed.
October 14th, 2005 on 1:06 am
I found out how to change the enctype in ie dynamically – formObj.encoding = “multipart/form-data”;
set both .encoding and .enctype and it seems to work – however, I’m trying point it at a dynamic iFrame, and IE just isn’t accepting the .target value.
*sigh*
December 9th, 2005 on 11:15 pm
uiuio uiouo iogfhfdhfdg page
August 1st, 2006 on 1:25 am
I was stuck with the same problem. The IE fix using “encoding” posted by EyePulp works great. As for his question about targeting a dynamic iFrame, I had that problem too. In the end, I check for IE and create my iframe in a div using an innerHTML. It’s the only way I have found that works.
iframediv = document.createElement( ‘div’ );
if (document.all)
iframediv.innerHTML = ”;
else {
myiframe = document.createElement( ‘iframe’ );
myiframe.id = “mytarget”;
myiframe.name = “mytarget”;
iframediv.appendChild(myiframe);
}
August 1st, 2006 on 1:29 am
It seems my code didn’t come through fully. The following should have appeared inside the innerHTML single quotes:
If it still gets blocked this time, it’s simply an html iframe element with name and id explicitly set to be “mytarget”.
April 6th, 2007 on 10:21 am
> however, I’m trying point it at a dynamic iFrame,
> and IE just isn’t accepting the .target value.
Try the following:
var frame = document.createElement(‘IFRAME’);
frame.name = frameName;
frame.id = frameName; // for MSIE fix later.
frame = body.appendChild( frame ); // appendChild() may return a different pointer..
window.frames[ frameName ].name = frameName;
This abuses the fact that window.frames[id] returns any element with an ID, not just frames. The frame exists in window.frames, but the name is not really registered yet in the DOM.
July 20th, 2007 on 12:28 pm
EyePulps solution works – but only partly. Because I need to change it after submitting back again, which doesn’t work for me. Im trying to do something like:
document.getElementById(‘data’).encoding = “multipart/form-data”;
document.getElementById(‘data’).enctype = “multipart/form-data”;
document.getElementById(‘data’).submit();
document.getElementById(‘data’).encoding = “x”;
document.getElementById(‘data’).enctype = “”;
The first assignment works but after the submit() IE throws an error saying the property “encoding” does not exist. This browser really sucks…