9

Doing $("#someId").val("newValue") doesn't change the DOM -- I can retrieve this value with $("#someId").val(), but the element in the DOM still doesn't have a value attribute.

How do I set the value of an input component and also change the DOM?

I'm using jQuery 1.5.1.

4
  • 1
    if you are using the firebug, there is a bug in it about updating the dom, you must click the window object to refresh it :)
    – Val
    Mar 8, 2011 at 12:43
  • type in an answer Val so I can up it :) Mar 8, 2011 at 12:47
  • @Val, where I should click on window object? In DOM tab? Mar 8, 2011 at 12:53
  • check my answer and it should make a bit more sense.
    – Val
    Mar 8, 2011 at 13:52

4 Answers 4

8

.val() does change the DOM. For example this:

$("#someId").val("newValue");

alert(document.getElementById('someId').value);

alerts 'newValue'.

See DEMO.

If you want to change the default value to be used in form resets, try this:

$("#someId").attr("defaultValue", "newValue");

See DEMO.

12
  • 1
    @Alex: Please post a jsFiddle example that demonstrates what you say. Maybe you are not looking at an up to date DOM - see the comment by Val.
    – rsp
    Mar 8, 2011 at 12:49
  • 1
    @rsp, same in Web Inspector... You wrote appropriate example, but issue still exist... Inspecting element in any browser, says, that there aren't "value" attribute... Mar 8, 2011 at 12:56
  • @Alex: I just checked and both Safari and Firefox show the correct value. Besides if it wasn't in the DOM then document.getElementById('someId').value wouldn't return that value. Are you sure you're looking in the right place?
    – rsp
    Mar 8, 2011 at 13:05
  • @rsp: yes, that why I'm confused... OK, there's a screenshot img851.imageshack.us/img851/8295/screenshot20110308at338.png, look at inspected element, and find out that there's no "value" attribute. Chrome, Mac OS X Mar 8, 2011 at 13:41
  • 1
    @Alex: You're looking at the source HTML, not the DOM. When you right-click the element in Firefox and select "Inspect element" click on the DOM tab in the bottom-right window and look for the "value" property. Is it there?
    – rsp
    Mar 8, 2011 at 14:01
3

This

$("#someId").val("newValue")

will change the value of the input element.

This

$("#someId").attr("value","newValue")

will change the value of the value attribute.

The second may help if you want to write the element. So, for example:

$("#someId").val("newValue")
$("#someId").attr("value","newValue")
write($("#someId").parent())

-will result in the new value being rendered, whereas

$("#someId").val("newValue")
write($("#someId").parent())

-will just show the original value.

2

Answer if you are using the firebug, there is a bug in it about updating the dom, you must click the window object to refresh it :)

Explanation @alex i was reading comments below. on @rsp answer and you seem to confuse the dom with the html tree a dom, is a tree like list of values used to keep track of values. and yes click dom tab, or right click the element in question and then inspect it in dom, values, changes dont show up on firebug, because of security reasons that prevent anything other than a browser to change its values or possibly because fire bug, has got it wrong and they probably working on it :)

1

Reading from "rsp" answer and discussion:

you want to change the HTML source, not the DOM.

Therefore use:

$('#YOUR_ID option[value="YOUR_VALUE"]').attr('selected', 'selected');

The method .val() does not change the HTML source.

Cheers. Stefano

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.