why doesn't innerHTML reflect changes made in an html form?

Question

this is a part of my html file:

<form id="foo">
   <select>
      <option value="1" selected>1</option>
      <option value="2">2</option>
   </select>
</form>

Now when I use the following javascript code, it gives me the exact content of the form:

alert(getElementById("foo").innerHTML);

However, after I change my options withing the form, the above code still returns the previous version of the form's content.

For instance, let's say I've switch my option from "1" to "2". In this case I expect the above javascript code returns the form's content with option "2" selected; but no matter how I change the form, it always return the original version of the form's content.

possible duplicate : http://stackoverflow.com/questions/5696453/dynamically-modified-value-of-input-not-reflected-in-dom — Praveen Vijayan, May 30 '15 at 18:47

Oriol · Accepted Answer · 2015-05-30T18:30:44.583

Content attributes show the initial state.

IDL attributes (aka properties) show the current state.

For example, let's say we have a text input like this:

<input value="foo" />

It's default text is "foo". Let's change it to "bar". Then,

input.getAttribute('value') will be the initial value: "foo".
input.defaultValue will be equivalent to the above: "foo".
input.value will be the current value: "bar.

var inp = document.querySelector('input');
(inp.oninput = function() {
  document.getElementById('attr').textContent = inp.getAttribute('value');
  document.getElementById('defVal').textContent = inp.defaultValue;
  document.getElementById('val').textContent = inp.value;
})();

<input value="foo" />
<p>Attribute: <span id="attr"></span></p>
<p>Default value: <span id="defVal"></span></p>
<p>Value: <span id="val"></span></p>

In your case it happens something similar. innerHTML only shows the HTML markup, which includes content attributes (which reflect the initial state) but not IDL attributes (current state).

If you want the current state, read it with IDL attributes instead of using innerHTML.

what you said seems to be correct only in case of elements with 'value' attribute (i.e. text boxes, buttons, ...). But the problem is that neither — Joseph_Marzbani, May 30 '15 at 18:42
In your case it's the same with `selected` instead of `value`, but it's more complicated because there are multiple `option`s. The workaround depends on what exactly you are trying to achieve. But you can try iterating the options and us`setAttribute` or `removeAttribute` depending on if they are selected or not. [**Demo**](http://jsfiddle.net/0trmz1oe/) — Oriol, May 30 '15 at 18:56

score 3 · Answer 2 · answered May 30 '15 at 18:23

This is snippet from the Mozilla Developer Network page for innerHTML.

More details here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

This property was initially implemented by web browsers, then specified by the WHATWG and W3C in HTML5. Old implementations may not all implement it exactly the same way. For example, when text is entered into a text input, Internet Explorer changes the value attribute of the input's innerHTML property but Gecko browsers do not.

Was looking at the same doc and lines :) – AmmarCSE May 30 '15 at 18:25 — AmmarCSE, May 30 '15 at 18:25

score 0 · Answer 3 · edited Apr 26 '16 at 18:32

0

This works for me:

$('myselect').find('option').prop('selected', false).eq(1).prop('selected', true);

In other words, it sets the 'selected' property the way you want it in all options.

edited Apr 26 '16 at 18:32

Paul Roub

36,322
27
84
93

answered Apr 26 '16 at 18:06

Lannie

156
1
4

OP might not have jQuery – Jeff Puckett Apr 26 '16 at 18:27

why doesn't innerHTML reflect changes made in an html form?

3 Answers3