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

changing a property does not change the source html. what are you trying to accomplish with this anyways? — dqhendricks
– 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
– 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
– Blazemonger, Commented Aug 7, 2012 at 20:39

Community · Accepted Answer · 2017-05-23 12:09:14Z

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Aug 7, 2012 at 20:35

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grinn Over a year ago

For those of you experiencing this same issue but with selects (drop-downs), I've updated Esailija's example to include those. Perhaps there's a better solution, but this one does the trick: jsfiddle.net/8PJMx/19

Esailija Over a year ago

@Grinn actually the exact same principles apply here, just with .selected and .defaultSelected: jsfiddle.net/8PJMx/20 And in case you are wondering about radio and checkboxes, .checked and .defaultChecked

Grinn Over a year ago

@Esailija Oh wonderful! My fix was ghetto, so I'm glad there's something better.

Collectives™ on Stack Overflow

html() method wrong when input value has changed

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related