CODEWITHSUNDEEP
javascriptjquery
BenM
BenM

Reputation: 53198

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

I am trying to dynamically change the actual HTML value attribute of an input using jQuery. Although using input.attr('value', 'myNewVal'); works to change it visually, when I inspect the source using Developer Tools in Chrome, the HTML attribute hasn't changed.

Since I'm doing a check in some PHP later on to see if the input has its original value, I need a way of changing the actual HTML attribute, ideally in jQuery. Has anyone else encountered this annoying bug and do any of you guys know a workaround?

I've also tried with .val() and the same happens - the underlying HTML attribute is unchanged.

Upvotes: 10

Views: 41709

Answers (11)

David McEleney
David McEleney

Reputation: 3813

This may be slightly off topic, but I have found that when I use the .data() function in jQuery, the value is set correctly, but the change isn't reflected in developer tools.

So,

$('#element').data('to-update', 'newValue')

In the developer tools (Elements view) still shows the old value.

But

$('#element').data('to-update')

returns 'newValue'

Upvotes: 0

Tim Down
Tim Down

Reputation: 324507

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.

Upvotes: 9

Anton
Anton

Reputation: 1583

I have a case in which jQuery function .val() and .attr("value", "...") works incorrect for value with url. Functions update the user interface but it doesn't effect with DOM(source). In this case should be used:

jQueryObj[0].setAttribute("value", "...");

It's right for jQuery v1.5.* => v1.6.*, for another versions it's not be checked.

Upvotes: 1

Corneliu
Corneliu

Reputation: 2942

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).

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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.

Upvotes: 1

Mark Coleman
Mark Coleman

Reputation: 40863

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.

Upvotes: 5

Kobi
Kobi

Reputation: 138007

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)

Upvotes: 15

niczak
niczak

Reputation: 3917

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.

Upvotes: 1

skarmats
skarmats

Reputation: 1917

It won't change the value in the DOM explorer of most development tools. But JavaScript will still get the current values. So

var newValue = 'new';
$(sel).val(newValue);
newValue == $(sel).val(); // true

Upvotes: 1

Christian
Christian

Reputation: 28125

That's because the developer tools do not refresh. This is a well known bug in these tools, including Opera's, Safari's as well as Firebug's (the latter one being a different issue).

As far as I know, you can right-click the source tree window and hit "refresh". This doesn't refresh the page, just the source view. This "fix" doesn't work in firebug though.

Upvotes: 3

Alex
Alex

Reputation: 65944

Don't use .attr() to change the value, use .val(), which was made specifically for this purpose:

input.val("new value");

Upvotes: 3

Related Questions