IE6 Javascript Form Submission – Hit or Miss

Internet Explorer 6, a venerable old browser to be sure, is still widely used despite the availability of much better (and free) alternatives. This continues to be a time-sink for any front-end developer.

While not at all a technical observation, my one reproducable use-case around this bug was by:

  1. Programatically creating a DOM Element <div>
  2. Dynamically creating and assigning an onclick event handler to the <div>
  3. Trying to submit a given form with validation and some custom hidden <input> fields.

What I observed is that the click propagation doesn’t seem to want to return from the onclick handler function

Here’s a fun one:

document.getElementById("myFormId").submit();

Should be straightforward, correct? In some select cases, this actually will not work.

The workaround:
Set the scope to the document level and force submission with a short timeout.

document.doSubmit = function() {
    document.getElementById("myFormId").submit();
}
setTimeout("document.doSubmit();", 50);

Putting it all together:
Here’s your trigger, say an <img> tag:
<img src="..." onclick="submitMyForm();" />

Here’s the form submit function:

function submitMyForm() {
    // do some validation, completion checking, etc.
    ...
    // now call the externalized submit function
    document.doSubmit();
}

Here’s the setTimeout handler:

document.doSubmit = function() {
    document.getElementById("myFormId").submit();
}

The <img> tag’s onclick event calls submitMyForm() which then calls document.doSubmit() .

Advertisements

16 Responses to IE6 Javascript Form Submission – Hit or Miss

  1. Mohammed Salim says:

    I had a terrible time dealing with this IE, I dont know what was happening to my coding,
    This is has saved me frm a damm problem

    Thanks Thanks Thanks a lot my dear friend

  2. smee bond says:

    I am having exact same problem with IE6. I have a form and I use document.getElementById(‘firstForm’).submit() to submit. It works the first time, second…third…does not work and again works randomly! It is not at all consistent. I would really like to use your work around…. could you explain in little more detail how it is useful to use setTimeOut() function to overcome this problem?

    I want to be able to submit the form consistently on clicking a ‘input type=image’

  3. Lázaro Menezes says:

    Thank you so much for this post.

    I’ve been having a similar problem with IE6 and your workaround fixed it perfectly!

    Thanks again.

  4. robert says:

    thanks so much for this info. it works great and fixed my exact problem.

  5. David says:

    Microsoft sucks. This page does not.

  6. I

    HATE

    INTERNET EXPLORER

  7. Sariq Shaikh says:

    Thanks For spending your time to help all of us. IE sucks ! It saved a lot of my time.

  8. Barry says:

    wow… first time I encountered this ‘feature’… thanks for a well-explained solution. nice to have at least a little understanding of the underlying ‘why’ before blindly throwing code at the problem… great article!

  9. Barry says:

    duh — okay, try this:
    onclick=”submitMyForm(); return false;”

    the onclick expects a return value — probably why the click event doesn’t propagate correctly — this should clear up your IE6 woes, without resorting to timeouts.

  10. Thanks man,

    Been searching the net for an hour, that st*p*d IE…
    Of all the code I found yours the only one that works.

  11. john says:

    Thanks
    its really work.

  12. Yerem Khalatyan says:

    Thanks a lot, it really works.

  13. Trevor says:

    Thank you! This has been killing us. I really appreciate you posting the solution.

  14. Nicolas says:

    Thank you so much!!

    It works perfect…

  15. ravindra says:

    Thanks you so much for this workaround. It worked !!!. I was not able to get it done by any means on IE6. working fine now….thanks

  16. Chris Nojima says:

    It saddens me that even on the cusp of 2012, people are still finding this workaround useful.

    BTW, has anyone tried out Barry’s onclick=something();return false; trick? I confess I haven’t tried it yet and am curious to see if it works (obviously for Barry, it does).

    Microsoft needs to EOL IE6 asap. Unfortunately, IE6 support will continue in lockstep with the support lifecycle of Windows XP Service Pack 2, Windows 2000 Service Pack 4, Windows Server 2003 Service Pack 1. (ref: http://support.microsoft.com/gp/lifean24)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: