9

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 screenshotenter image description here

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?

Improve this question

3 Answers 3

Reset to default
10

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.

Screen shot of Chrome property view

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

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.

Improve this answer

2 Comments

mmm the onchange will fire even if I input the same value in the input box.. Am I right?
Generally in our implementations, we create a simple class for input box, where we initialize it with some value. The class willbe responsible for rendering the input element, and listen to its events and when it catches the change event, it can check if the value is actually changed as it caches the initialized value. If you think this is complicating your requirements, then you can maintain an array or list of values, map it to the input elements and can perform check based on the value stored in the array. Either way you will need some js manipulation
1

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

Improve this answer

1 Comment

You could, but why bother when defaultValue comes for free?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.