How to find parent form from element?

Question

I am trying to find parent form from element using code below:

<form id="f1" action="action1.html"> form1 <button id="btn1" onclick="testaction(this); return false;" >test form 1</button> </form>   <script type="text/javascript" > function testaction(element) {     var e = $(element.id);     var form = e.parent('form');      alert(form.id); // undefined!!     alert(form.action); // undefined!!     alert(document.forms[0].action); //http://localhost/action1.html } </script> 

It should be something really simple.... Thanks in advance

Answer 1

http://api.jquery.com/closest/ will do it. Used like this

$('#elem').closest('form'); 

Answer 2

The problem you're having is that form is a jQuery object, not a DOM object. If you want it to be the form object, you would do e.parent('form').get(0).

Furthermore, you're treating element incorrectly - jQuery takes id selectors in the form #id but you've passed it id.

Here's a working version:

function testaction(element) {   var e = $(element);//element not element.id   var form = e.parent('form').get(0);//.get(0) added    alert(form.id); // undefined!!   alert(form.action); // undefined!!   alert(document.forms[0].action); //http://localhost/action1.html } 

See this for it in action: http://jsfiddle.net/BTmwq/

EDIT: spelling, clarity