jQuery trouver le formulaire parent

219

j'ai ce 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>

Comment sélectionner le formulaire dont input[name="submitButton"]fait partie? (lorsque je clique sur le bouton soumettre, je souhaite sélectionner le formulaire et y ajouter des champs)

kmunky
la source

Réponses:

485

Je suggère d'utiliser closest, qui sélectionne l'élément parent correspondant le plus proche:

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

Au lieu de filtrer par le nom, je ferais ceci:

$('input[type=submit]').closest("form");
karim79
la source
2
Peut-être faudrait-il ajouter obtenir par index? '$ ("entrée [type = soumettre]"). plus proche ("formulaire");' renvoie un tableau de formulaires.
sergzach
J'essaie d'utiliser ce qui précède de cette manière: $ (". Each img"). Click (function () {$ (this) .closest ("form"). Show ();}); Mais je n'arrive pas à le faire fonctionner. : /
Alisso
2
La réponse de Peterjwest est meilleure que celle-ci.
gagarine
En HTML5, il y a un nouvel attribut 'formulaire' qui vous permet d'avoir l'élément en dehors du formulaire parent. Cela doit être vérifié en premier.
mcintyre321
56

Vous pouvez utiliser la référence de formulaire qui existe sur toutes les entrées, c'est beaucoup plus rapide que .closest()(5 à 10 fois plus rapide dans Chrome et IE8). Fonctionne également sur IE6 et 7.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
la source
2
Vous mentionnez IE8. Cela fonctionne-t-il également pour les versions 6, 7 et 9?
Sonny
1
C'est beaucoup mieux et plus rapide comme l'a mentionné @peterjwest. Concernant IE6, je pense que .form sur les éléments d'entrée était sur IE4, malheureusement la page de développement de netscape a disparu maintenant ... et qui vérifierait mozilla one.
Maciej Łopaciński
C'est une manière beaucoup plus sûre que d'utiliser closest()car une entrée peut avoir une affectation de formulaire propre: codepen.io/anon/pen/vNqEyg
Möhre
Vous avez probablement utilisé la sténographie if pour garder votre code court, mais dans cet exemple, cela ne distrait que du code réel que vous souhaitez afficher (en particulier pour les personnes qui ne connaissent pas la sténographie). Je serais en faveur de l'utilisation d'un if régulier ().
AeonOfTime
Je dirais qu'il y a trop d'encombrement avec cette solution. Si vous optez pour cela (ma solution ci-dessous - oui, c'est une publicité :)): stackoverflow.com/a/18921404/261332 , alors vous n'avez pas besoin de ce genre de complications, car cela fonctionnera juste quand il est censé le faire et ne faites rien d'autre.
userfuser
17

Pour moi, cela ressemble à la plus simple / la plus rapide:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});
userfuser
la source
2
Pour moi, utiliser $(this.form)est la meilleure solution
jap1968
2

Comme pour les navigateurs HTML5, on peut utiliser inputElement.form- la valeur de l'attribut doit être l'identifiant d'un <form>élément dans le même document. Plus d'informations sur MDN .

Alexander Mihailov
la source