JQuery - object.id is undefined when it shouldn't be

Question

Hi,

I'm working with JQuery and i'm running into this strange (or perhaps stupid) error.

In my HTML I have:

<input type="password" name="repeatPassword" id="id_repeatPassword" />

And then in my javascript code i have:

validateRepeatPassword($('#id_repeatPassword'));

Unfortunately in the function "validateRepeatPassword":

function validateRepeatPassword(o) {
        // this works
        if (o.value == $("#id_password").val()) {
        // this returns "undefined"
        alert(o.id)
...
}

why?

Answer 1

o is a reference to a jQuery object, NOT a DOM element reference. Inside your validateRepeatPassword function do:

alert( $(o).attr('id') );

If you want to access the direct DOM element's property from the jQuery object,

alert( o[0].id )

alert( o.get(0).id );

Answer 2

Inside your function o is a jQuery object, you should grab the id with the attr function of of o.

alert(o.attr('id'));

But if you want to work directly with the DOM element on your validateRepeatPassword function, you can pass a reference to the element:

validateRepeatPassword($('#id_repeatPassword').get(0));