Why does jQuery val() function not update attribute 'value'?

Question

I came across with this issue way after I completed the website since I had to implement history in ajax based page (which requires to update certain places with html (which includes forms with simple text inputs - that's where the problem - they don't get their values assigned, because they have their values set by val() and not by attr() - lies)). Am I doomed to have to replace all javascript from

$('#xxx').val('someValue');

to

$('#xxx').attr('value', 'someValue');

or there is some hope to bypass this?

A pretty trivial example here. As you can see in the dialog, attribute value is not set in html code.

Solution

It uses the underlying native element.value = 'someValue' that of course sets the value property of the element

element.property_to_set = 'new_value';

so it does not change the attribute, that would be

element.setAttribute('value', 'someValue')

which is what attr() does internally, while prop() changes the property, just like val().
The reason it changes the property, is that the property is what is used in a form submit, and it's normally what is used to get the value back in javascript as well, so it makes sense to stick with the property and not the attribute, as the attribute is normally just used to set the initial value of the property, and changing the attribute later with javascript does not update the property, which would be the opposite problem of the one you're having, and it would affect all form submits and be a major issue.

Comments

[Andrius Naruševičius]

I think I now understand what each of attr/val/prop does, but how do I change my code? Since I need to capture the html code and apply it back when needed. Currently my values disappear :(

[Andrius Naruševičius]

Btw, why does it act differently if the input is of type="hidden"?

[adeneo]

You could always rewrite the val() method to change the attribute and the property, and add that after jQuery but before your own script, that way it would work the way it is, here's how you'd do it -> jsfiddle.net/kZsdm

[Andrius Naruševičius]

What to about when user edits his input (jsfiddle.net/Qd52v/1)? It's attribute value isn't changing either (nor it does in the link you provided). Do I need to overwrite keyup event too?

[adeneo]

Nope, that's how it works in HTML as well, when the user types in the input the property is updated, not the attribute, as that is the standard and how it's supposed to work.

[Andrius Naruševičius]

Well "supposed" doesn't work when I need to save the form with values and then lay it sometime later :( Anyways, thank you for multiple answers :)

[Andrius Naruševičius]

What bad can happen if I use attr instead of val?

[adeneo]

Depends on what you intend to use the values for. There could be issues with form submits, and jQuery always uses the property internally, so you could have issues with some jQuery methods not working properly etc.