jQuery 1.7.1 - Text input's 'value' not updating in Firebug Inspect element but is on screen

Question

Using jQuery 1.7.1, I have noticed that the value attribute/property of a text input field does not update when I view it in Firebug's Inspect Element tool, but does update on the screen, i.e. in the actual visible text box.

For example, when changing the value of a text with the following (used inline):

jQuery(function() {
    jQuery('#event').val("test");
});

the text box itself displays test but Firebug's Inspect Element does not represent the change:

<input type="text" value="" placeholder="" id="event" name="event" class="input-text">

I'm sure I have seen the value change in Firebug before using older jQuery, however not in this scenario, nor that of a colleague of mine also using jQuery 1.7.1.

Is this a quirk/bug of this particular version of jQuery or have I missed a step somewhere?

Answer 1

The value attribute always shows the defaultValue. Firebug never displayed the current value in the attribute. The current value is always visible on the screen.

This has nothing to do with Firebug or jQuery, it is the HTML standard.

Answer 2

The attribute value never changes, only the property.

http://jsfiddle.net/cc5Pm/1/

var input = document.getElementsByTagName("input")[0];
setInterval(function(){
    input.value = parseInt(input.value) + 1;
    console.log(input.value, input.getAttribute("value"));
},1000);

Answer 3

Sometimes Firebug doesn't always reflect some changes, I have noticed this before.

If there is a refresh I haven't found it. You can either turn Firebug off and on again or just use the console to check the value has changed

console.log($("#event").val());

Answer 4

I've seen this too: i.e the value attribute of an input does NOT change in Firebug. Last time I paid attention to this was a while ago (like 2 years). Incidentally, I was using jQuery too, but I really doubt jQuery has anything to do with this. It's just how Firebug works (or at least worked).

Of course, you could still use the Firebug console to definitively get the value:

console.log( $('input#event').val() )