I've been working on some code for a contracting client which involves a really cool drag-n-drop interface for building forms on-the-fly. While working on the project, I ran into an issue in IE6 when dragging a <div /> element that form fields and there values had been changed by the user, the values were not properly reflected when I'd copy the node using the cloneNode() DOM method.
It turns out IE 6/7 doesn't properly clone some form elements when you use the cloneNode(true) and the form element is a checkbox, radio or select element. My suspicion is this is because MSIE stores the element in a non-XHTML way (if you do an innerHTML on the source element you'll see that checkbox elements have a "CHECKED" attribute with no value.)
I was able to work around the issue by doing the following:
The project I'm working on is actually using the jQuery Interface v1.2 library. To fix the problem I actually had to modify the source code in the Draggables to find instances of the cloneNode(true) method and apply the fix.
NOTE:The actual fix I used in jQuery varies slightly, as I used available jQuery methods to detect IE6. In jQuery you can do:
This quite frankly feels like an issue I've run into before, but just forgot the solution. Hopefully blogging about it well help me if I ever run into the problem again.
I've added an example page that shows this problem off in action: http://www.pengoworks.com/workshop/bugs/cloneNode_issue.htm