I have a hidden element and within my jQuery:

<input type="hidden" id="1val" value="24">
var valID = $("#1val").attr("value");

However when I try to print valID it is always printed as undefined? What am I doing wrong?

Thanks

I have a hidden element and within my jQuery:

<input type="hidden" id="1val" value="24">
var valID = $("#1val").attr("value");

However when I try to print valID it is always printed as undefined? What am I doing wrong?

Thanks

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 31, 2016 at 5:31 Josh Crozier 241k5656 gold badges400400 silver badges313313 bronze badges asked Jan 30, 2016 at 22:09 KyaniteKyanite 75633 gold badges1515 silver badges3030 bronze badges 4

• something else wrong then... works fine here jsfiddle/5pn8o78r Probably forgot to use document.ready or element doesn't exist when your code runs. Use val() if that hidden element will ever be changed by other code also – charlietfl Commented Jan 30, 2016 at 22:12
• That's not reproducible: jsfiddle/kx8oops6 . Make a proper SSCCE – Paul Commented Jan 30, 2016 at 22:12
• Is the DOM ready when you call the .attr ? Try putting in inside $(document).ready(function() {.... In addition, use .prop if you're using jquery 1.6+ – user1299518 Commented Jan 30, 2016 at 22:14
• Check that $("#1val") is actually finding the <input> element. You can do that by checking its .length. If it isn't being found, consider the advice given in Why does jQuery or a DOM method such as getElementById not find the element? – Jonathan Lonowski Commented Jan 30, 2016 at 22:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It's always safer to use the .prop() or .val() method to get the current value property:

var valID = $("#1val").val();
// or
var valID = $("#1val").prop("value");

As of jQuery version 1.9, the .attr() method will only get the element's attribute, which may not actually reflect the element's actual property.

---

According to the version 1.9 release notes, under .attr() versus .prop():

The value property versus attribute on input elements is another example of this ambiguity. The attribute generally reflects the value that was read from the HTML markup; the property reflects the current value. Since the .val() method is the remended jQuery way to get or set the values of form elements, this confusion usually does not affect users.

However, when a selector like input[value=abc] is used, it should always select by the value attribute and not any change made to the property by the user, for example from them typing into a text input. As of jQuery 1.9, this behaves correctly and consistently. Earlier versions of jQuery would sometimes use the property when they should have used the attribute.

Under the hood, as of version 1.9, the .attr() method will only return the current attribute of the element (and not the property). The attribute and the property may not actually be the same. For instance, if there was initially no attribute on the element, and then the value was programatically set using a method such as .val(), then the attribute wouldn't have changed meaning that .attr('value') would return undefined.

As stated above, use the .prop() or .val() method in order to get the element's current value property.

Use $('#input-id').val(); to get value of input.