Why jquery .val() function is not setting a real value?

Question

I use this function to check for the presence of attributes:

var hasAttribute = function(el, attr) {
    if ("hasAttribute" in el) {
        return el.attributes[attr] != null;
    }
    else if ("outerHTML" in el) {
        return (el.outerHTML
                   .replace(el.innerHTML, "")
                   .indexOf(" " + attr + "=") > -1);
    }
};

The problem is when I set an input value using .val(x), I can get the value if I use .val() but hasAttribute function cannot detect it. This jsfiddle shows the problem (I expected that first alert say "input has a value" and second shows it, but in Chrome at least first alert says "input needs a value").

How to make .val(x) work as expected? (Or how to make hasAttribute detect these kind of values)

`hasAttributes` only tests whether such an attribute exists in the HTML source, basically (or lets say in the "plain DOM node"). `.val` works with the `value` property of the `HTML....Element` which is an extension to the standard DOM interface. You have to distinguish between HTML attributes and DOM element properties (which are actually called attributes as well) for that matter. — Felix Kling, Feb 20 '13 at 18:06
It made me confused. 1) DOM elements do have [`hasAttribute`](https://developer.mozilla.org/en-US/docs/DOM/element.hasAttribute) method, why simply not to use it? 2) If you use jQuery why not to use `$(el).is("[" + attr + "]")`? — VisioN, Feb 20 '13 at 18:07
@VisioN that still wouldn't find a "value" attribute after `.val(x)` is called, because jQuery will just set the "value" property of the DOM node. — Pointy, Feb 20 '13 at 18:08

score 5 · Accepted Answer · edited May 23 '17 at 12:18

5

Attributes and properties are 2 different entities. Attributes are defined inline with the html element.. on load the browser reads each attributes and create associated property.

Later any updates to this element will update the property and not the attributes.

This https://stackoverflow.com/a/5876747/297641 answer has detailed attr vs prop.

May be something like below,

if ($("input").prop("value")) {
    alert("input has a value");
} else {
    alert("input needs a value");
}

You don't really need a function for this now. Since jQuery is going to return undefined if the prop doesn't exist.

As Felix pointed out, it would be best if you just do input.value which is falsy if it doesn't have any value which is "".

edited May 23 '17 at 12:18

Community

1
1

answered Feb 20 '13 at 18:08

Selvakumar Arumugam

79,297
15
120
134

Ok, so if I understand, I should change hasAttribute for something like this: var hasAttribute = function(el, attr) { return typeof $(el).prop(attr) != "undefined"; }; – Ivan Feb 20 '13 at 18:19
2

@Ivan: Depends on what you want. E.g. `el.value` always exists for an `input` element. If a value was not set in the HTML, then `el.value` will return an empty string. It will never be `undefined` though. – Felix Kling Feb 20 '13 at 18:22

score 2 · Answer 2 · answered Feb 20 '13 at 18:07

2

Using .val is like doing el.value = .... It is not the same as setting the value attribute on the element.

answered Feb 20 '13 at 18:07

loganfsmyth

156,129
30
331
251

Why jquery .val() function is not setting a real value?

2 Answers2