Dynamically modified value of input not reflected in DOM

Question

How can I get the DOM to reflect the modified input value?

<div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').html())
}, 1000)
</script>

score 6 · Answer 1 · answered Apr 17 '11 at 21:15

6

Try changing the DOM directly. For example:

<div id="myDiv">
  <input id="myInput" value='0'>
</div>

<script>
setInterval(function() {
    var v = parseInt(document.getElementById("myInput").value) + 1;
    document.getElementById("myInput").setAttribute("value",v);
}, 1000);
</script>

<input type="button" onclick="javascript:alert(document.getElementById('myDiv').innerHTML);" value="Click to see DOM" />

answered Apr 17 '11 at 21:15

Oliver Moran

5,137
4
31
45

+1 But I would still like to know why the jquery code didn't work. – Jesse Aldridge Apr 18 '11 at 01:47
1

This is an old post, and I was searching for the why as well. Here is what I found from another post, which explains the 'why' part. https://stackoverflow.com/questions/32793811/difference-between-setattribute-and-htmlelement-attribute-value – MaXon Apr 04 '19 at 13:13

score 4 · Accepted Answer · edited May 23 '17 at 11:48

The following seems to work for me:

http://jsfiddle.net/h8AP8/1/

All credit to gnarf here and his formhtml:

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

So your modified code would be:

<div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
(function($) {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $("textarea", this).each(function() {
      // updated - thanks Raja!
      this.innerHTML = this.value;
    });
    $("input:radio,input:checkbox", this).each(function() {
      // im not really even sure you need to do this for "checked"
      // but what the heck, better safe than sorry
      if (this.checked) this.setAttribute('checked', 'checked');
      else this.removeAttribute('checked');
    });
    $("option", this).each(function() {
      // also not sure, but, better safe...
      if (this.selected) this.setAttribute('selected', 'selected');
      else this.removeAttribute('selected');
    });
    return oldHTML.apply(this);
  };

  //optional to override real .html() if you want
  // $.fn.html = $.fn.formhtml;
})(jQuery);


setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').formhtml())
}, 1000)
</script>

As the cited question suggests, it's a innerHTML problem. Actually, how different browsers implement innerHTML. — Alejandro García Iglesias, Nov 15 '11 at 19:49

score 0 · Answer 3 · answered Apr 17 '11 at 21:33

I'm sorry, but the problem is not in the example code you supplied. Or when this is the only html in your page, then you're missing the starting and closing tags.

This clean page runs perfectly on my machine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head></head>
    <body>
        <div><input value='0'></div>

        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
        <script>
        setInterval(function() {
          $('input').val(parseInt($('input').val()) + 1)
          console.log('div.html(): ', $('div').html())
        }, 1000);
        </script>
    </body>
</html>

Or are you testing in Internet Explorer? In that case, remove the line which is logging to your error console:

console.log('div.html(): ', $('div').html())

Nope, this doesn't work either. The page runs fine, the problem is that the DOM never changes. Notice that value="0" never changes in the console log. — Jesse Aldridge, Apr 18 '11 at 02:05

Dynamically modified value of input not reflected in DOM

3 Answers3

Linked