245

i have this html

<ul>
    <li><form action="#" name="formName"></li>
    <li><input type="text" name="someName" /></li>
    <li><input type="text" name="someOtherName" /></li>
    <li><input type="submit" name="submitButton" value="send"></li>
    <li></form></li>
</ul>

How can i select the form that the input[name="submitButton"] is part of ? (when i click on the submit button i want to select the form and append some fields in it)

Sparky
  • 98,165
  • 25
  • 199
  • 285
kmunky
  • 15,383
  • 17
  • 53
  • 64
  • If you just want to add fields and you already know what they should contain, you could just use hidden fields. – PRMan Sep 02 '21 at 20:20

5 Answers5

518

I would suggest using closest, which selects the closest matching parent element:

$('input[name="submitButton"]').closest("form");

Instead of filtering by the name, I would do this:

$('input[type=submit]').closest("form");
karim79
  • 339,989
  • 67
  • 413
  • 406
  • 3
    May be we should add getting by index? '$("input[type=submit]").closest("form");' returns an array of forms. – sergzach May 22 '12 at 06:20
  • I'm trying to use the above in this way: $(".each img").click(function() { $(this).closest("form").show(); }); But I can't seem to get it to work. :/ – Alisso Jun 22 '12 at 01:47
  • 2
    peterjwest answer is better than this one. – gagarine Feb 17 '14 at 09:16
  • In HTML5, there is a new 'form' attribute which allows you to have the element outside the parent form. This should be checked first. – mcintyre321 Aug 04 '15 at 11:00
58

You can use the form reference which exists on all inputs, this is much faster than .closest() (5-10 times faster in Chrome and IE8). Works on IE6 & 7 too.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
  • 4,294
  • 2
  • 33
  • 46
  • 2
    You mention IE8. Does this work for versions 6, 7, and 9 as well? – Sonny Oct 27 '11 at 13:52
  • 1
    This is much better and faster as @peterjwest mentioned. Re IE6 I think .form on input elements was on IE4, unfortunately netscape dev page is gone now... and who would check mozilla one. – Maciej Łopaciński Aug 06 '13 at 20:28
  • This is a much safer way rather than using `closest()` since an input may have an own form assignment: http://codepen.io/anon/pen/vNqEyg – Möhre Nov 25 '15 at 15:24
  • You probably used the shorthand if notation to keep your code short, but in this example it only distracts from the actual code you want to show (especially for people unfamiliar with the shorthand). I would be in favor of using a regular if(). – AeonOfTime Dec 04 '15 at 13:33
  • I'd say there is too much clutter with that solution. If you go with this (my solution below - yes this is an advertisement :)): http://stackoverflow.com/a/18921404/261332, then you don't need that kind of complications, since it will just work when it's supposed to and do nothing otherwise. – userfuser Jul 27 '16 at 08:25
22

To me, this looks like the simplest/fastest:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});
userfuser
  • 1,350
  • 1
  • 18
  • 32
3

As of HTML5 browsers one can use inputElement.form - the value of the attribute must be an id of a <form> element in the same document. More info on MDN.

Alexander Mihailov
  • 1,050
  • 1
  • 12
  • 19
0

see also jquery/js -- How do I select the parent form based on which submit button is clicked? 

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});
Community
  • 1
  • 1
Jonathan Hendler
  • 1,239
  • 1
  • 17
  • 23