html() method wrong when input value has changed

Question

Essentially, I have some code that needs to get the HTML of a parent element when any of its input elements blur. That's pretty simple. The problem is that the HTML returned when calling html() on the parent element, does not reflect the current value of the input elements contained within. That is, in Firefox or Chrome. It works in IE of all places.

Here's the JSFiddle: http://jsfiddle.net/8PJMx/15/

Try changing "world" in the textbox to "everyone" and clicking the button. Note that I'm also appending $.now() so that you can see that the code is in fact executing.

As you can see, $("#parent").html() does not update, even though $("#child").val() does. For your viewing pleasure, here's the HTML:

<div id="parent">Hello <input type='text' id="child" value='world' /></div>
<button id="separateEvent">Get HTML.</button>
<br>
<p>The HTML for #parent is:</p>
<textarea id="parentsHtml" style="width:95%; height: 100px;"></textarea>
<p>The value of #child is:</p>
<textarea id="childsValue" style="width:95%; height: 100px;"></textarea>

...and here's the JavaScript:

$("#separateEvent").click(function ()
                         {
                             $("#parentsHtml").val($("#parent").html() + "\r\n@" + $.now());
                             $("#childsValue").val($("#child").val() + "\r\n@" + $.now());
                         });

Answer 1

The html value="" attribute does not reflect the .value DOM property (unintuitively), but it reflects the .defaultValue DOM property. The .value property is not serialized to HTML, but .defaultValue is.

User input changes .value, not .defaultValue.

.value only reflects .defaultValue when the input's dirty value flag is false

Here's a workaround, which also includes an example for SELECT boxes: http://jsfiddle.net/8PJMx/20/