Input type ="number" Value does not update in html is this normal

Question

I have not used this before just now and noticed it does not update its value in html?

Basically i have a Html Table with this in it , and user will update it to a quantity needed and Submit and i will take the Html parse it to get the things.

But in the html i see the value of input box is always 1, i it never updates itself

<input type="number" id="testNumber"   value="1" min="1" max="100" />

Answer 1

While yes, the markup indicates that the value is still 1, if this form were to be submitted, the displayed value of the number input would still get returned.

You can verify this by running the following in your browser's console:

var input = document.getElementById('testNumber');
input.value; 

EDIT 1:

If you want the value of the html to match the value of the dom element, assign it yourself, like so:

input.setAttribute('value', input.value);

Answer 2

This is just a sample. But it handles the INCREASE(+)/DECREASE(-) buttons clicked and updates the input value.

$("input[type=number]").click(function(e) {

    $(this).attr( 'value', $(this).val() );

});