Test File: Lost Form Cache Using DOM

Version: dom manipulated form elements [BROKEN]

This is a test file from mleiv.com.

Issue: When you move form elements using Javascript DOM, the form cache is lost.

Where will this be a problem? Any time the user uses back/next buttons to edit the form.

Section 1

Section 2

To test this, open the broken page in IE and make a change to the form elements. Then navigate to another page like this one and come back with the back button. You should see your changes in the field. Now click "Move" and make another change. Navigate to another page and come back again.

The fields will reset to the startup value (not the first or second value entered above).

Lest anyone think I only pick on IE, it is possible to make this happen in Firefox. But it requires a lot more work. If you go to the broken Firefox page you will see that caching is lost. To cause this, I dynamically generated a table wrapper for the fields in Section 2 and also generated a new select field. And the new select field must be inserted first into the table cell (before the existing fields). This combination makes Firefox lose cache also.

The fix for this problem is fairly complex. You must create a clone of the field first and move *that* instead. Then make the original invisible. Then make sure any changes to the clone get written to the original. Note that IE's onunload event has an *additional* glitch (it can never be easy) where it doesn't cache values set during unonload. So you can't do it there. Look at the fixed page.

There are lots of DOM issues in IE, especially leaks. No doubt this particular fix has caused more problems of that sort.