Bagaimana cara mendapatkan bentuk masukan?

106

Saya perlu mendapatkan referensi ke induk FORMULIR dari INPUT ketika saya hanya memiliki referensi ke INPUT tersebut. Apakah ini mungkin dengan JavaScript? Gunakan jQuery jika Anda suka.

function doSomething(element) {
    //element is input object
    //how to get reference to form?
}

Ini tidak berhasil:

var form = $(element).parents('form:first');

alert($(form).attr("name"));
javascript jquery forms input Ropstah
sumber

Jawaban:

185

Elemen DOM asli yang merupakan input juga memiliki formatribut yang mengarah ke bentuknya:

var form = element.form;
alert($(form).attr('name'));

Menurut w3schools , .formproperti kolom input didukung oleh IE 4.0+, Firefox 1.0+, Opera 9.0+, yang merupakan lebih banyak browser yang dijamin jQuery, jadi Anda harus tetap menggunakan ini.

Jika ini adalah jenis elemen yang berbeda (bukan elemen <input>), Anda dapat menemukan induk terdekat dengan closest:

var $form = $(element).closest('form');
alert($form.attr('name'));

Juga, lihat tautan MDN ini di formproperti HTMLInputElement:

Paolo Bergantino
sumber
Baiklah ini berfungsi .. Tentang atribut formulir. Saya baru saja mencobanya dan itu juga berhasil. Tapi ini tidak didukung di semua browser yang Anda katakan?
Ropstah
Saya cukup yakin itu. Saya hanya tidak 100% yakin jadi saya tidak ingin menjanjikan apapun. Saya sedang memeriksanya sekarang ...
Paolo Bergantino
5
Gunakan element.form - ini akan bekerja di lebih banyak browser daripada yang dilakukan jQuery. Ini juga salah satu referensi properti, jadi akan menjadi sekitar seribu kali lebih efisien daripada menaiki pohon DOM dengan terdekat ().
NickFitz
1
Saya setuju. Seperti yang saya katakan, saya awalnya tidak yakin apakah properti formulir diterapkan secara luas di semua browser umum. Saya telah mengedit jawaban saya untuk secara lebih eksplisit mencantumkan ini sebagai opsi yang lebih baik sementara saya meninggalkan yang terdekat sebagai berita gembira jika ini adalah jenis elemen yang berbeda.
Paolo Bergantino
Tampaknya berfungsi juga dengan jenis masukan lain seperti pilih. Senang mendengarnya.
Falk
42

Setiap masukan memiliki formproperti yang menunjuk ke bentuk masukan tersebut, jadi sederhananya:

function doSomething(element) {
  var form = element.form;
}
Gareth
sumber
4

Saya menggunakan sedikit jQuery dan javascript gaya lama - kode kurang

$($(this)[0].form)

Ini adalah referensi lengkap untuk formulir yang mengandung elemen

Nigel Francois
sumber
3
Anda pada dasarnya mengatakan "jadikan ini objek jQuery dan kemudian jadikan itu bukan objek jQuery".
Isherwood
1
Ya ampun, kenapa tidak lakukan saja $(this.form)?
Andre Figueiredo
3

Menggunakan jQuery :

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}
yfeldblum
sumber
2

Jika menggunakan jQuery dan memiliki pegangan ke elemen formulir apa pun, Anda perlu mendapatkan (0) elemen tersebut sebelum menggunakan .form

var my_form = $('input[name=first_name]').get(0).form;
Steven Wright
sumber
2 
function doSomething(element) {
  var form = element.form;
}

dan di html, Anda perlu menemukan elemen itu, dan menambahkan atribut "form" untuk menghubungkan ke formulir itu, silakan merujuk ke http://www.w3schools.com/tags/att_input_form.asp tetapi atribut formulir ini tidak mendukung IE , misalnya, Anda harus mengirimkan id formulir secara langsung.

阳光 Emi
sumber
2

Saya perlu menggunakan, element.attr('form')bukan element.form.

Saya menggunakan Firefox di Fedora 12.

Nikov
sumber
0

sesederhana:

alert( $(this.form).attr('name') );
sadnix.dll
sumber
0

Dan satu lagi....

var _e = $(e.target); // e being the event triggered
var element = _e.parent(); // the element the event was triggered on
console.log("_E " + element.context); // [object HTMLInputElement]
console.log("_E FORM " + element.context.form); // [object HTMLFormElement]
console.log("_E FORM " + element.context.form.id); // form id
Jadeye
sumber
0

Contoh fungsi Javascript ini dipanggil oleh event listener untuk mengidentifikasi formulir

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;
STEM FabLab
sumber
-2

apakah ini akan berhasil? (meninggalkan tindakan kosong, formulir pengiriman kembali ke dirinya sendiri juga, kan?)

<form action="">
<select name="memberid" onchange="this.form.submit();">
<option value="1">member 1</option>
<option value="2">member 2</option>
</select>

"ini" akan menjadi elemen pilih, .form akan menjadi bentuk induknya. Baik?

Josh P.
sumber