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)

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");

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) : $();

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`
});

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 .


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.