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: /

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());
                         });

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/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());
                         });

• javascript
• jquery
• firefox
• webkit

Share Improve this question Follow edited Aug 7, 2012 at 20:36 Blazemonger 93.1k2727 gold badges145145 silver badges181181 bronze badges asked Aug 7, 2012 at 20:30 GrinnGrinn 5,5533939 silver badges5252 bronze badges 3

• 2 changing a property does not change the source html. what are you trying to acplish with this anyways? – dqhendricks Commented Aug 7, 2012 at 20:35
• I think it's worth pointing out that the same thing happens if you inspect the element in browsers tools. Chrome tools still reports a value of "world" in the HTML, even though the value itself has changed. – Evan Davis Commented Aug 7, 2012 at 20:35
• In my experience, manipulating the DOM through .html() is rarely the best way to do things. – Blazemonger Commented Aug 7, 2012 at 20:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

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/8PJMx/20/