17

Basically when invoking .attr("value") over a text box, It will return its value which was set in the markup, not the value which was set by using .val().

For instance,

<input id="test" type="text" value="testing" />

Js:

$("#test").val("hello");
console.log($("#test").val()); //hello
console.log($("#test").attr('value')); //testing

But while doing the same over a hidden element, the result was different like below,

HTML:

<input id="test1" type="hidden" value="testing" />

Js:

$("#test1").val("hello");
console.log($("#test1").val()); //hello
console.log($("#test1").attr('value')); //hello

DEMO

The value attribute got ignored if we set value for that element by using .val(). Anyone have idea on why is this happening? Relevant link which contains details for this behavior would be more helpful.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • 1
    You can see this question http://stackoverflow.com/questions/8312820/jquery-val-vs-attrvalue – LTasty Sep 01 '15 at 18:45
  • What version of jQuery? – Dexygen Sep 01 '15 at 18:48
  • 1
    Interestingly, [`document.getElementById('test').defaultValue`](http://jsfiddle.net/S9mUL/1706/) also logs (in the demo) `"newVal"` (the jQuery-set string). @George: in versions [1.11.0](http://jsfiddle.net/S9mUL/1706/), [2.1.3](http://jsfiddle.net/S9mUL/1707/), and [3.0.0-alpha1](http://jsfiddle.net/S9mUL/1708/). – David Thomas Sep 01 '15 at 18:48
  • 1
    @GeorgeJempty I just tested with recent versions. You can see the exact version in my demo. – Rajaprabhu Aravindasamy Sep 01 '15 at 18:49
  • `.attr(...)` is only getting the objects value at the time of html creation. clearly it seems doing something unexpected in case of the hidden value. – Mutant Sep 01 '15 at 18:50
  • 2
    An interesting finding! :( Is this a bug? The link provided does not seem to address the issue. jQuery version does not seem to matter. **The question is, why should it matter whether the element is of `type="hidden"` or not?. jQuery's `.val( newVal )` should NEVER change the attribute value!** – PeterKA Sep 01 '15 at 19:02
  • I agree @PeterKA, but you should be using `prop` for this operation, not `attr`. – Brett Caswell Sep 01 '15 at 19:03
  • 3
    This isn't specific to jQuery. Here's the same demo using raw Javascript, with the same results: http://jsfiddle.net/barmar/S9mUL/1709/ – Barmar Sep 01 '15 at 19:05
  • so the answer should be in the spec, in regards to hidden type inputs, eh? – Brett Caswell Sep 01 '15 at 19:06
  • My apologies. I "misspoke". The jQuery version does seem to matter. Issue seems to exist in jQuery versions older than `1.8.x`. What changed in `1.9.x`? **Consider this question: If you change the elements value attribute, would the value property change?** – PeterKA Sep 01 '15 at 19:12
  • 1
    @PeterKA, the 'issue' is present with 2.1.3 as well.. the answer lyes with w3's markup spec on input type hidden - "The user does not interact with this field; instead, the VALUE attribute specifies the value of the field.".. http://www.w3.org/MarkUp/html-spec/html-spec_8.html – Brett Caswell Sep 01 '15 at 19:16
  • @PeterKA, change the value of a input type submit, and should do the same thing. – Brett Caswell Sep 01 '15 at 19:19
  • @BrettCaswell, thanks for the explanation. There seems to be more to it. Version of jQuery upto `1.8.3` do not seem to have this issue. The rest do. Why? – PeterKA Sep 01 '15 at 19:22
  • The already asked question doesn't seem to have official documentation in its answer. The link provided by brett can be considered. – Rajaprabhu Aravindasamy Sep 01 '15 at 19:28
  • @PeterKA Skipped updating the `defaultValue` property of hidden element while modifying the `value` property. This might have been a bug in older versions of jquery. They might have fixed it by updating the both while it comes to a hidden element, in recent versions. – Rajaprabhu Aravindasamy Sep 01 '15 at 19:33
  • @PeterKA, I'm not entirely familiar with the code base on this, but perhaps the reason is in line 122 of this changeset: https://github.com/jquery/jquery/pull/1017/files#r2031507 – Brett Caswell Sep 01 '15 at 19:38

1 Answers1

3

Hidden inputs aren't user editable, so you may find that the default and current values are the same for them. So the .val() and .attr('value') are the same for hiddenelement

As far as I get , the value attribute describes the default value for the element, not the current value. Current Value is what you can access through the value property (which is what the jQuery val() does).

Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
  • 1
    This can be considered semantically, but syntactically `.attr()` will return the value whatever set in markup as per the documentation. – Rajaprabhu Aravindasamy Sep 01 '15 at 19:09
  • @RajaprabhuAravindasamy That is correct but when you use `.val()` with hidden field, it changes the value of the attribute `value` and so `.val()` and `.attr()` produce the same output – Tushar Gupta Sep 01 '15 at 19:14
  • @RajaprabhuAravindasamy: Yes, and on hidden inputs changing the `.value` does alter the `value` attribute in the DOM. – Bergi Sep 01 '15 at 19:17
  • 1
    yep, same is true for input type submit as well it seems: http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.1.2.7 – Brett Caswell Sep 01 '15 at 19:22
  • 1
    @BrettCaswell This is an interesting link. Yeah the answer resides there it seems. – Rajaprabhu Aravindasamy Sep 01 '15 at 19:23
  • @Bergi By mistake, I pressed that reopen link in my question, it reopened the post without any confirmation. My apologies. Can you redo what you have done previously? – Rajaprabhu Aravindasamy Sep 01 '15 at 19:55
  • @RajaprabhuAravindasamy: No, seems I can only cast one vote. But you should be able to close it yourself. – Bergi Sep 01 '15 at 20:05