jQuery .attr('value', 'new_value') not working?

Question

I am trying to dynamically change the actual HTML value attribute of an input using jQuery. Although using input.attr(\'value\', \'myNewVal\'); wor

Answer 1

This is not a bug. The value attributte is not supposed to change.

The input control is a bit special. According to the HTML spec, the value content attribute gives the default value of the input element. You can see the actual control value which has been set programatically or changed by user in the DOM explorer. When the form is reset the value of the element is set to the value of the value content attribute. (too many values here :))

This is the standard behaviour for all VISIBLE input types. (try setting value for a HIDDEN element and value content attribute will be updated ... in Firefox at least).

Answer 2

attr should work as well, specially since you do see it change, but try also to use val - it is better suited for changing values:

input.val('myNewVal');

Make sure not to use the "View Source" command, it reloads the page, or shows the page as it was loaded. Instead, use the DOM viewer - right click on the input element and choose "Inspect element". (This is the same as "Development tools" - Ctrl+Shift+I in Chrome in Windows)

Answer 3

Both attr() and val() deal exclusively with the value property [update February 2014: this was true prior to jQuery 1.6 but is not true since the introduction of prop() in 1.6], not attribute. The value attribute only specifies the initial value of the input. Once the actual text within the input has changed (either by user input or script), the value property and attribute operate entirely independently. In almost all cases, this doesn't matter, because it's almost always the current value that you want (and it's that value that is submitted to the server).

If you really must change the actual attribute (which I'm pretty sure you don't), do it via setAttribute():

input[0].setAttribute('value', 'myNewVal');

Note that IE < 8 (and compatibility modes in IE 8) has broken support for getAttribute() and setAttribute() that maps attributes to properties, so the above doesn't apply in those browsers.

Answer 4

They responses that inform you to use the .val("value") method are correct, the only way that I know of to see these changes (in the source) is using the Firefox Web Developer Plugin and clicking "View Source" -> "View Generated Source". This shows the source after DOM manipulation (i.e. calls to the .val() method) have occurred, I use it a lot when working with functions/methods that modify DOM elements.

So to recap: [#input_id = ID of your input field]

$("#input_id").val("new value");

Then use the plugin to view the generated source and you will see the updated value.

Answer 5

Use .val().

input.val("some text");

Based upon your comment, the view source will most likely not be updated. If you are still getting the original value, something else must be going on and more details most likely will be required.

jsfiddle goodness.

Answer 6

The dev tools show you the source code as it arrived from the server (for the value attribute), so you see the truly original value.

If you want to alter it (and check against the new value) you can store a reference somewhere. Best would be to use the .data() method and check against that stored value.

For usage purposes though (submitting or accessing it through JS), changing the value through the .attr() or .val() method should be enough.