jQuery znajdź formularz nadrzędny

219

Mam ten 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>

Jak mogę wybrać formularz, którego input[name="submitButton"]jest częścią? (kiedy klikam przycisk Prześlij, chcę wybrać formularz i dołączyć do niego niektóre pola)

kmunky
źródło

Odpowiedzi:

485

Sugerowałbym użycie closest, które wybiera najbliższy pasujący element nadrzędny:

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

Zamiast filtrować według nazwy, zrobiłbym to:

$('input[type=submit]').closest("form");
karim79
źródło
2
Może powinniśmy dodać get by index? „$ („ input [type = upload] ”). closest („ form ”); ' zwraca tablicę formularzy.
sergzach
Próbuję użyć powyższego w ten sposób: $ (". Each img"). Click (function () {$ (this) .closest ("form"). Show ();}); Ale nie mogę sprawić, żeby zadziałało. : /
Alisso
2
odpowiedź peterjwest jest lepsza niż ta.
gagarine
W HTML5 istnieje nowy atrybut „form”, który pozwala mieć element poza formą nadrzędną. Należy to najpierw sprawdzić.
mcintyre321
56

Możesz użyć odwołania do formularza, które istnieje na wszystkich wejściach, jest to znacznie szybsze niż .closest()(5-10 razy szybsze w Chrome i IE8). Działa również w IE6 i 7.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
źródło
2
Wspominasz o IE8. Czy to działa również w wersjach 6, 7 i 9?
Sonny
1
Jest to o wiele lepsze i szybsze, jak wspomniano @peterjwest. Re IE6 Myślę, że .form na elementach wejściowych był na IE4, niestety strona dewelopera netscape już nie ma ... i kto by sprawdził Mozillę.
Maciej Łopaciński,
Jest to o wiele bezpieczniejszy sposób niż używanie, closest()ponieważ dane wejściowe mogą mieć własne przypisanie formularza: codepen.io/anon/pen/vNqEyg
Möhre
Prawdopodobnie użyłeś skróconej notacji, aby skrócić swój kod, ale w tym przykładzie odwraca on uwagę od faktycznego kodu, który chcesz pokazać (szczególnie dla osób niezaznajomionych ze stenografią). Byłbym za regularnym użyciem if ().
AeonOfTime,
Powiedziałbym, że w tym rozwiązaniu jest za dużo bałaganu. Jeśli pójdziesz z tym (moje rozwiązanie poniżej - tak, to jest reklama :)): stackoverflow.com/a/18921404/261332 , to nie potrzebujesz tego rodzaju komplikacji, ponieważ zadziała tylko wtedy, gdy powinno i nic innego nie rób.
userfuser
17

Dla mnie wygląda to na najprostsze / najszybsze:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});
użytkownik użytkownika
źródło
2
Dla mnie używanie $(this.form)jest najlepszym rozwiązaniem
jap1968
2

Z przeglądarek HTML5 można korzystać inputElement.form- wartość atrybutu musi być identyfikatorem <form>elementu w tym samym dokumencie. Więcej informacji na temat MDN .

Alexander Mihailov
źródło