3

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

Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
Kyanite
  • 556
  • 10
  • 22
  • something else wrong then... works fine here https://jsfiddle.net/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 Jan 30 '16 at 22:12
  • That's not reproducible: https://jsfiddle.net/kx8oops6/ . Make a proper [SSCCE](http://sscce.org/) – Paul Jan 30 '16 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+ –  Jan 30 '16 at 22:14
  • Check that `$("#1val")` is actually finding the `` element. You can do that by checking its [`.length`](http://api.jquery.com/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?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Jonathan Lonowski Jan 30 '16 at 22:15

2 Answers2

3

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

Community
  • 1
  • 1
Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
2

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

glutaminefree
  • 362
  • 2
  • 10