jQuery übergeordnetes Formular finden

Ich habe dieses 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>

Wie kann ich das Formular auswählen, zu dem input[name="submitButton"]das gehört? (Wenn ich auf die Schaltfläche "Senden" klicke, möchte ich das Formular auswählen und einige Felder darin anhängen.)

Ich würde vorschlagen closest, Folgendes zu verwenden , um das am besten passende übergeordnete Element auszuwählen:

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

Anstatt nach dem Namen zu filtern, würde ich Folgendes tun:

$('input[type=submit]').closest("form");

Sie können die Formularreferenz verwenden, die für alle Eingaben vorhanden ist. Dies ist viel schneller als .closest()(5-10-mal schneller in Chrome und IE8). Funktioniert auch mit IE6 & 7.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();

Für mich sieht das am einfachsten / schnellsten aus:

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

Ab HTML5-Browsern kann man verwenden inputElement.form- der Wert des Attributs muss eine ID eines <form>Elements im selben Dokument sein. Weitere Infos zu MDN .

Siehe auch jquery / js - Wie wähle ich das übergeordnete Formular basierend auf der Schaltfläche zum Senden aus?

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});