Question

I would like to get the updated DOM html string for the form elements (e.g. <input type="text">, <input type="radio">, <input type="radio">, <textarea>).

I found this question and I am trying to use the formhtml plugin written by gnarf:

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

The problem is that it works in Firefox and Chrome but only works partially in IE8 (I have not tested other versions).

If you open the following page in IE8, you can see there is a text box, some checkboxes and radios. Try entering some text and check the checkboxes and radios.

http://jsfiddle.net/e9j6j/1/

Then click on the ‘Click’ button.

You can see that no matter I am retrieving the html string through the innerHTML property of a native DOM object or by using the formhtml() function of the plugin. The html returned only reflects the changes in the value attribute of the textbox, you can never see the checked="checked" attributes in <input type="radio"> and <input type="checkbox"> even you have already checked them before clicking the button.

Why is this happening, and how I can make it work in IE?

Thanks in advance.

EDIT:
I am sorry. I made some mistakes in my question, now it has been rewritten.

EDIT:
The sample codes were created to demonstrate my problem but I made some mistakes. Both IE7 and IE8 do give expected results (I also did the tests again).

In my original codes, I do not directly use formhtml() function on the $('#div1') but rather clone it before using formhtml() like this:

alert($('#div1').clone().formhtml());

And on IE8 with jQuery 1.3.2, the returned html does not reflect the checked states of those checkboxes and radios, I never thought it would be the problem of the clone() function that’s why when I created the sample codes, I did not clone it and so the actual problem failed to be demonstrated.

The updated sample codes are here (with jQuery version changed to 1.3.2):

http://jsfiddle.net/e9j6j/4/

This may show the problem of the clone() function on IE8 (I don’t have IE8 right now, I will test it when I am home, I will report later).

EDIT:

I have just did the test. It’s really the problem of clone() function in jQuery 1.3.2 on IE8. It fails to copy the states of checkboxes and radios. After changing it to jQuery 1.5.1. It works perfectly.

Answer 1

I tried the test case at http://jsfiddle.net/e9j6j/1/ on IE8 and IE7 and they worked for me.

Steps to replicate problem:

1. Load http://jsfiddle.net/e9j6j/1/ in IE browser.
2. Enter text in the text field, check first radio button, check first checkbox.
3. Press ‘Click’ button.

Expected result:

Both alerts show value on text field and ‘checked’ state on first radio & first checkbox.

Actual result:

As expected. However, bear in mind that IE’s representation of the DOM means that checked="checked" is actually reported as CHECKED but it is correct.

UPDATED:

Added a test to ensure that the checked state can be copied to a new dom node:

$('#btn1').click(function() {
    alert($('#div1').formhtml());
    alert(document.getElementById('div1').innerHTML);

    var div1 = $('#div1');
    div1.clone().insertAfter(div1);
});

This creates another set of fields which retain the original input state.
View on jsfiddle.