13

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());
                         });
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
Grinn
  • 5,370
  • 38
  • 51
  • 2
    changing a property does not change the source html. what are you trying to accomplish with this anyways? – dqhendricks Aug 07 '12 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 Aug 07 '12 at 20:35
  • In my experience, manipulating the DOM through `.html()` is rarely the best way to do things. – Blazemonger Aug 07 '12 at 20:39

1 Answers1

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/

Community
  • 1
  • 1
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • 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: http://jsfiddle.net/8PJMx/19/ – Grinn Aug 08 '12 at 13:42
  • 1
    @Grinn actually the exact same principles apply here, just with `.selected` and `.defaultSelected`: http://jsfiddle.net/8PJMx/20/ And in case you are wondering about radio and checkboxes, `.checked` and `.defaultChecked` – Esailija Aug 08 '12 at 13:47
  • @Esailija Oh wonderful! My fix was ghetto, so I'm glad there's something better. – Grinn Aug 08 '12 at 17:12