jQuery menemukan formulir induk

219

saya punya html ini

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

Bagaimana saya dapat memilih formulir yang input[name="submitButton"]merupakan bagiannya? (ketika saya mengklik tombol kirim saya ingin memilih formulir dan menambahkan beberapa bidang di dalamnya)

kmunky
sumber

Jawaban:

485

Saya sarankan menggunakan closest, yang memilih elemen induk pencocokan terdekat:

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

Alih-alih memfilter berdasarkan namanya, saya akan melakukan ini:

$('input[type=submit]').closest("form");
karim79
sumber
2
Mungkin kita harus menambahkan dengan indeks? '$ ("input [type = kirim]"). terdekat ("form");' mengembalikan array formulir.
sergzach
Saya mencoba menggunakan cara di atas dengan cara ini: $ (". Each img"). Klik (function () {$ (this) .closest ("form"). Show ();}); Tapi sepertinya saya tidak bisa membuatnya bekerja. : /
Alisso
2
Jawaban peterjwest lebih baik dari yang ini.
gagarine
Di HTML5, ada atribut 'formulir' baru yang memungkinkan Anda memiliki elemen di luar formulir induk. Ini harus diperiksa terlebih dahulu.
mcintyre321
56

Anda dapat menggunakan referensi formulir yang ada pada semua input, ini jauh lebih cepat daripada .closest()(5-10 kali lebih cepat di Chrome dan IE8). Bekerja di IE6 & 7 juga.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
sumber
2
Anda menyebutkan IE8. Apakah ini juga berfungsi untuk versi 6, 7, dan 9?
Sonny
1
Ini jauh lebih baik dan lebih cepat seperti yang disebutkan @peterjwest. Kembali IE6 Saya pikir .form pada elemen input berada di IE4, sayangnya halaman dev netscape hilang sekarang ... dan siapa yang akan memeriksa mozilla satu.
Maciej Łopaciński
Ini adalah cara yang jauh lebih aman daripada menggunakan closest()karena input mungkin memiliki tugas bentuk sendiri: codepen.io/anon/pen/vNqEyg
Möhre
Anda mungkin menggunakan singkatan jika notasi untuk menjaga kode Anda pendek, tetapi dalam contoh ini hanya mengalihkan dari kode aktual yang ingin Anda tampilkan (terutama untuk orang yang tidak terbiasa dengan singkatan). Saya akan mendukung penggunaan if () biasa.
AeonOfTime
Saya akan mengatakan ada terlalu banyak kekacauan dengan solusi itu. Jika Anda menggunakan ini (solusi saya di bawah ini - ya ini adalah iklan :)): stackoverflow.com/a/18921404/261332 , maka Anda tidak memerlukan komplikasi seperti itu, karena itu hanya akan berfungsi ketika seharusnya dan jangan lakukan yang sebaliknya.
userfuser
17

Bagi saya, ini sepertinya yang paling sederhana / tercepat:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});
userfuser
sumber
2
Bagi saya, menggunakan $(this.form)adalah solusi terbaik
jap1968
2

Pada browser HTML5 yang dapat digunakan inputElement.form- nilai atribut harus berupa id <form>elemen dalam dokumen yang sama. Info lebih lanjut tentang MDN .

Alexander Mihailov
sumber