06 Jul

IE bugs – dynamically creating form elements

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.

9 thoughts on “IE bugs – dynamically creating form elements”

  1. James Barrett -

    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.

  2. kae -

    You might get away with copying the childNodes of that form into an array, creating a new form with the desired enctype, then removing the old form, replacing it with the new one, then appending the original childNodes.

    Then again, you may just be screwed.

  3. EyePulp -

    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*

  5. Dominic -

    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);
    }

  6. Dominic -

    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”.

  7. Diederik van der Boor -

    > 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.

  8. Simon -

    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…

  9. Pingback: <iframe> + createAttribute('name') streikt im IE - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)

Comments are closed.

%d bloggers like this: