Html () incorrect when changing input value

Question

Essentially, I have code that should get the HTML of the parent element when any of its input elements gets blurred. It is pretty simple. The problem is that the HTML returned when html() called in 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 the "world" in the text box to "everything" and clicking the button. Note that I also add $.now() so you can see that the code is actually executing.

As you can see, $("#parent").html() not updated, even if $("#child").val() does. For your viewing pleasure, here is 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 (unintuitively) property, but reflects the .defaultValue DOM property. The .value property is not serialized in HTML, but .defaultValue is .defaultValue .

Changes to user input .value , not .defaultValue .

.value only reflects .defaultValue when the dirty value flag is false

Here is a workaround that also includes an example for SELECT blocks: http://jsfiddle.net/8PJMx/20/