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.

What HTML element are you dealing with? An input or something different (like a textarea)? — Johannes H.
– Johannes H., Commented Dec 7, 2013 at 21:35

adeneo · Accepted Answer · 2013-12-07 21:39:48Z

16

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.

answered Dec 7, 2013 at 21:39

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

8 Comments

Andrius Naruševičius Over a year ago

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 Over a year ago

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

adeneo Over a year ago

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 Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related