using jQuery selector with a dom element

I have a javascript function that receives a dom element as 开发者_运维百科a parameter. In this function I am trying to get to the closest ancestor 'form'. I wanted to use:

function submit_form(obj)
{
    var form1 = $(obj).closest("form");
    alert (form1.id);
}

here obj is a dom element of submit type. I just don't seem to get it working.

Could someone please help?

You want

function submit_form(obj)
{
    var form1 = $(obj).closest("form")[0];  
    alert (form1.id);
}

The result of jQuery selection/traversal functions always is an array, possibly with one element only, but still an array. Index into the array to get actual DOM elements.

However, you can do this without jQuery as long as obj is an input/select/textarea element.

function submit_form(obj)
{
    var form1 = obj.form;  
    alert (form1.id);
}

For the sake of completeness, you could also stay within jQuery and do

function submit_form(obj)
{
    var $form1 = $(obj).closest("form");
    alert ( $form1.attr("id") );
}

function closest(obj, tagName) {

   // Go up in the tree until you find the ancestor form
   while (obj.parent !== null) {
      if (obj.nodeType === 1) {
         parent = obj.parentNode;
         if (parent.tagName === tagName) {
            return parent;
         }
      }   
   }

   // If no form exists return null
   if (obj.tagName !== tagName) {
      return null;
   }
}

Use it in this way

var closestForm = closest(obj, 'FORM')

form1 would be a jQuery object, so you can either use .attr("id"), or access the DOM element itself using [0].id:

var form1 = $(obj).closest("form");
alert(form1.attr("id"));

var form2 = $(obj).closest("form")[0];
alert(form2.id);