html input displays different text to value that it posts

Question

I am feeling really stupid and not sure if doing something really dumb what... so excuse me in advance.

I have the following HTML:

<input type="text" value="0" name="pcscubes" id="pcscubes">

I have the below jquery syntax:

var cubes=123.2;
$("#pcscubes1").val(cubes);
var test=$("#pcscubes1").val();
alert(test);

When the jquery executes, the input box will display 123.2 and the alert will be 123.2.

if you inspect the html object though, the value is still 0?

so the display of the input is different from what the real value is. so when I submit this form it posts 0 rather than 123.2

Now I have built a whole web app with this syntax and works perfectly. today it just stops working? I have restarted browser, checked old code that was working, logged off and on and still it does the same.

web app obviously has jquery loaded and jquery ui on this form.

using codeigniter?

any ideas as I am banging my head over something so stupid....

Out of interest I created the below fiddle and it is doing the same? http://jsfiddle.net/49nqU/

why is the value 0 when it is showing 123.2?

Thanks as always,

Solution 1

This is a case of attributes vs. properties.

What you are seeing in the inspector is the value attribute, which does not update when you programmatically update a field's value property.

Pay no attention to what the DOM inspector says; it'll only show the value as it was when the page loaded (unless you explicitly change the field's value attribute rather than, as jQuery's val() does, its value property.)

Further reading: http://jquery-howto.blogspot.co.uk/2011/06/html-difference-between-attribute-and.html

Some attributes are closely tied to their property counterparts. That is to say, updating the property also updates the attribute. This is the case, for example, with the class attribute and its className property counterpart. value, however, is different; updating the property does not update the attribute (but, just to confuse things further, updating the attribute does update the property!)

Solution 2

val() is changing the value property, not attribute. The value attribute is initialized at the loading of the page. Once you change text field the value property and attribute have differnet values.

But you can use plain JS for changing the value attribute also.

Try:

var cubes=123.2;
document.getElementById('qty').setAttribute('value',cubes);
var test=$("#qty").val();
alert(test);

DEMO

Comments

[Ram]

Since value is a property, you should set the value property, using setAttribute is not the proper way of manipulating properties.

[laaposto]

@undefined I am using setAttribute for changing the value attribute as the OP wants. By changing that as a side effect you have also the change of value property

[eloyesp]

To clarify a little bit, the value attribute is the default value of the input, not the current value.