CODEWITHSUNDEEP
javascriptjquery
Mikayil Abdullayev
Mikayil Abdullayev

Reputation: 12376

Value is undefined when element is obtained with jQuery

Below is the code where I obtain my input element with jQuery:

var txt = $(tableRow).find('input:text');
if (txt.value == null) {
  //TO DO code
}

and here's how I do it with pure JavaScript

var txt = document.getElementById('txtAge');
if (txt.value == null) {
  //TO DO code
}

With the first way the value of the txt is undefined. But with the second way the value is what's inside the input element. Now more interesting is, on the bottom-right pane of the Mozilla Firebug if I scroll down to the "value" of the txt I can see it there, both ways.

I know I can simply say $(txt).val(), but I also want to understand why I can't access the value of an element if it's been selected by jQuery. Isn't jQuery just a library of JavaScript functions?

Upvotes: 0

Views: 4061

Answers (4)

David Hellsing
David Hellsing

Reputation: 108520

jQuery selects DOM elements using various native and non-native techniques and places them all in it’s own array-like instance that also wraps them in their own API. jQuery doesn’t "extend" native DOM properties or methods, so you will need to target the DOM node to do that.

Think of it like this:

var node = document.getElementById('txtAge'); // the DOM node
var txt = $('#txtAge'); // the same node wrapped in a jQuery object/API

Since jQuery object holds an array-like collection of DOM nodes, so you can access the first element by doing:

txt[0] // same as node

But it’s generally recommended that you use the .get() method:

txt.get(0)

Another more jQuery-way to do what you want is to iterate through a jQuery collection using .each():

$(tableRow).find('input:text').each(function() {
    // "this" in the each callback is the DOM node
    if ( this.value == null ) {
        // Do something
    }
});

Upvotes: 2

Sergi Juanola
Sergi Juanola

Reputation: 6647

.value is not part of the jquery api. You should use .val() instead:

var txt = $(tableRow).find('input:text');
if (txt.val() == "") {
  //TO DO code
}

A dom object and a jquery dom object are not exactly the same. In fact, you can open the Developer tools (in webkit) or Firebug (Firefox) to check what are they in the inside. Jquery holds more information (actually, it contains an instance of the dom that it's representing). So, if you wanted to use .value, you need to call the "generic" dom object from the jquery object, and then use .value.

Upvotes: 6

dda
dda

Reputation: 6213

.find() will return an arry-like object. If you're sure that there's one, and one only, element matching your query, you could do

var txt = $(tableRow).find('input:text')[0].value;

That's not very jQuery-like, so to speak, more like a mismatch of both jQuery and DOM methods, but it'll get what you want. Also, since you show, as a DOM example, var txt = document.getElementById('txtAge');, this could be rewritten in jQuery as

var txt = $('#txtAge')[0];

Upvotes: 1

kannanrbk
kannanrbk

Reputation: 7144

var x = $(tableRow).find('input:text');

It's an jquery object . 

`x.value`

There is no property value in jquery object . So it returns undefined.

x.val() is a method you can use for get the value of an element.

Upvotes: 1

Related Questions