26

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

3
  • 2
    .parent only gives the immediate ancestor. Commented Aug 30, 2010 at 19:22
  • 3
    You should just $(element) instead of $(element.id).
    – kennytm
    Commented Aug 30, 2010 at 19:23
  • how about btn1.form? Commented Oct 28, 2015 at 17:07

6 Answers 6

48

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

$('#elem').closest('form');
2
  • 5
    Best solution, unlike parents() stops once it finds a match Commented Dec 16, 2010 at 19:20
  • how it best of btn1.form? Commented Oct 28, 2015 at 17:05
16

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

4
  • 1
    Variable formwould be undefined here. The solution by @jAndy worked.
    – Roland
    Commented Jan 22, 2018 at 16:25
  • This is absolutely WRONG code! The .parent() only travels a single level up the DOM tree, so if the form contains some mid-level parent like as when the element is inside a div (eg: form > div > element ), this function will return that div not the form!!! Commented Sep 29, 2018 at 10:15
  • @S.Serpooshan - In the example given in the question, the form is the direct parent. If you want the form and it might be higher in the DOM tree, you would use closest('form')
    – Ryley
    Commented Sep 29, 2018 at 14:58
  • @Ryley yes i see, but this is very common to have several containers around html elements. do you think your solution is reliable?? usually such kind of solutions will break the code very soon when you continue to add more features to your code later without knowing where is the problem.. Commented Sep 30, 2018 at 4:41
10

Throw the inline event handler aboard and stay unobtrusive here.

$(document).ready(function(){
   $('#btn1').bind('click', function(){
      var form = $(this).closest('form')[0];

      alert(form.id); // defined
      alert(form.action); // defined
   });
});

Ref.: .closest(), .bind()

1
  • closest("form")[0] was the correct solution, returning a proper element. parent('form').get(0) returned undefined!
    – Roland
    Commented Jan 22, 2018 at 16:16
10

Button element has form property http://www.w3schools.com/jsref/dom_obj_pushbutton.asp

buttonElement.form
1
  • 1
    the .form property of input elements is supported by IE 4.0+ ! Commented Sep 29, 2018 at 11:31
1
$(".whatever").parents("form");
1
  • 3
    closest() is a much better solution as it stops once a match is found Commented Dec 16, 2010 at 19:20
0
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="f1" action="action1.html">
form1 <button id="btn1" onclick="get_attr(this); return false;" >test form 1</button>
</form>

<form id="f2" action="action2.html">
form2 <button type="submit" >test form 2</button>
</form>

<script>

$('button[type="submit"]').click(function(e) {
    var form = $(this).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
    e.preventDefault();
});
function get_attr(element) {
    var form = $(element).parent("form").get(0);
    alert("ID: " + form.id);
    alert("Action: " + form.action);
}

</script>

Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.