HTML input value attribute - same input, (apparently) different results

Question

How does value attribute work for the html input tag after an edit via the inputbox?

example:

<input type="text" name="test" id="test" value="Hello world" />

this will show an input box with the text "Hello world". If I edit it inputing a new string into the rendered textbox (not via raw code), and then try to get his value using js like this

alert(document.getElementById('test').value)

I'll, correctly, get the NEW value. But if I inspect the element through chrome developer tools (or firebug or anything you prefer), I'll see the same "Hello world" string as it was in the beginning..

Which of the two is the right one? js value or chrome inspector?

Here's the Example Fiddle and here's a screenshot

I came up to this while trying to find a solution to this problem: Classic shop situation, I have a table with X inputs tag , where an user can input the quantity of X items. I need to check if one or more values have changed since the previous value of each input: if the comparison between OLD and NEW val returns that the valuehas changed, I need to update the order. Otherwise there's no need to save/update.

I thought I could use attr. "value" to store the "old" value of the input, but probably was not the best choice..

Can anyone explain this behaviour? It's only a "refresh" problem or is there something else behind?

Answer 1

Both are right, they just show different things.

The DOM value property gives you the current value.

The HTML value attribute gives you the default value (the same as the DOM defaultValue property).

The Chrome DOM inspector shows you attribute values in the HTML view. You have to look at the property view to see the property values.

Answer 2

You can find information in this article.

the value seen in html is the default value the form is loaded with. If you want the DOM also to update then you have to use ele.setAttribute("value", "new value")

If you want to know if a element is changed, the best is to attach a onchange event to the input elements and mark some flag in the change handler to know if the form changed or not.

Answer 3

You can assign a so-called proprietary attribute to the input; for example "oldval" so that you can later compare it with current value