Test File: IE Submit() AutoComplete Bug

Version: javascript submit tricky [FIXED]

This is a test file from mleiv.com.

Form #1 (straightforward submit)
Form #2 (calling an onsubmit event handler)
Form #3 (using buttons or links to submit)
Submit

Issue: AutoComplete text is lost when using javascript to trigger submit() in IE. This can be a button with an onclick handler, the onsubmit handler of the form, or any other trigger used to submit the form.

Where will this be a problem? Whenever users expect AutoComplete dropdown options to help them fill in oft-entered data (addresses, ticker symbols, etc.).

Many users turn off AutoComplete for security reasons. Please turn it on to test this. In IE: Tools->Internet Options->AutoCOmplete->Forms (check). In Firefox: Tools->Options->Privacy->Saved Forms (check).

To test this, open the broken page in IE and type a value in the first form. Then click submit. Then type the first letter - a little dropdown appears by the form field with your previous entry shown. Now do the same steps in the second or third form. Notice that there is no AutoComplete dropdown this time.

Of course the simplest fix is to just never call submit() from within javascript. Sometimes, however, this just won't work for you. So then you have to get tricky.

Look at the fixed page.

For the second form shown, where there is an onsubmit event handler, the fix is nonintuitive but fairly simple: use a javascript bookmarklet in the action property instead of the onsubmit handler. Don't ask me why it works, but it does. The only trick here is that you MUST change the action property of the form before calling form.submit() or you will hit an endless recursive loop.

But for the third form - with the buttons and links triggering the submit - that solution doesn't work (and since I don't really know why it works in the first place, I can't guess why it doesn't help here). Instead, I added a real submit button to the form. You can't see it, because I used CSS to make it invisible. Then I used DOM to call its click() method instead of calling the form's submit() method. Tricky, no? But it works: IE is fooled and AutoComplete is working again.