Question

I’m not getting the same result when I use JQuery vs javascript functions.

This is the HTML

<form id="testform">
  <div id="FormContainerID"></div>
  <input type="button" id="y" value="Button" />
  <div id="ListContainerID"></div>
</form>

Here is the Javascript

01   var Form = document.getElementById('y').form;
02 //var Form = $('#y').closest('form');
03   alert(Form);

When Activating row 1, I get a legal form object. The Alert says “object HTMLFormElement” and everything works fine.

But if I use row 02 instead, Alert says “object Object” and then I ofcourse get errors becaus it isn’t a real Form object.

Why is JQuery not returning the correct Object?
I get the same result with Chrome and IE8.

[EDIT]
I’m using JQuery version: jquery-1.5.1.min

[SOLUTION]
Thank you for clearing this up. I Changed the code to:

var Form = $('#'+fChildID).closest('form')[0];

…and now it works as a charm.
Vivek Goel was the first to answer, so creds to him. I voted up you other guys that explained the JQuery instance model.

Thank you.

Answer 1

with jquery use

 alert(Form[0]);

http://jsfiddle.net/dvCtr/