Jak uzyskać formularz zawierający dane wejściowe?

106

Potrzebuję odniesienia do nadrzędnego FORMULARZA INPUT, gdy mam tylko odniesienie do tego INPUT. Czy jest to możliwe z JavaScriptem? Jeśli chcesz, użyj jQuery.

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

To nie działa:

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

alert($(form).attr("name"));
Ropstah
źródło

Odpowiedzi:

185

Natywne elementy DOM, które są formdanymi wejściowymi, mają również atrybut wskazujący formę, do której należą:

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

Według w3schools The.form właściwość pól wejściowych jest obsługiwana przez IE 4.0+, Firefox 1.0+, Opera 9.0+, czyli jeszcze więcej przeglądarek, które gwarantuje jQuery, więc powinieneś się tego trzymać.

Gdyby to był inny typ elementu (nie <input>), można by znaleźć najbliższego rodzica z closest:

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

Zobacz również ten link MDN dotyczący formwłaściwości HTMLInputElement:

Paolo Bergantino
źródło
W porządku, to działa ... O atrybucie formularza. Właśnie tego spróbowałem i to też działa. Ale to nie jest obsługiwane w różnych przeglądarkach, o których mówisz?
Ropstah
Jestem całkiem pewien, że tak. Po prostu nie jestem w 100% pewien, więc nie chcę niczego obiecywać. Patrzę na to właśnie teraz ...
Paolo Bergantino
5
Użyj elementu.form - będzie działać na większej liczbie przeglądarek niż jQuery. Jest to również jedno odniesienie do właściwości, więc będzie około tysiąc razy bardziej wydajne niż chodzenie po drzewie DOM z metodą near ().
NickFitz
1
Zgadzam się. Jak powiedziałem, początkowo nie byłem pewien, czy właściwość form została szeroko zaimplementowana we wszystkich popularnych przeglądarkach. Zredagowałem moją odpowiedź, aby bardziej wyraźnie wymienić to jako lepszą opcję, podczas gdy pozostawiam najbliższą jako ciekawostkę, jeśli był to inny typ elementu.
Paolo Bergantino
Wydaje się, że działa również z innymi typami wejść, takimi jak select. Dobrze wiedzieć.
Falk
42

Każde wejście ma formwłaściwość wskazującą na formularz, do którego należy wejście, więc po prostu:

function doSomething(element) {
  var form = element.form;
}
Gareth
źródło
4

Używam trochę jQuery i starego javascript - mniej kodu

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

To jest pełne odniesienie do formularza zawierającego element

Nigel Francois
źródło
3
Zasadniczo mówisz „uczyń ten obiekt jQuery, a następnie uczyń go nie obiektem jQuery”.
Isherwood
1
Jezu, czemu po prostu nie robić $(this.form)?
Andre Figueiredo
3

Korzystanie z jQuery :

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}
yfeldblum
źródło
2

Jeśli używasz jQuery i masz uchwyt do dowolnego elementu formularza, musisz pobrać (0) element przed użyciem .form

var my_form = $('input[name=first_name]').get(0).form;
Steven Wright
źródło
2
function doSomething(element) {
  var form = element.form;
}

a w html musisz znaleźć ten element i dodać atrybut „formularz”, aby połączyć się z tym formularzem, zobacz http://www.w3schools.com/tags/att_input_form.asp, ale ten formularz nie jest attr obsługuje IE , np. musisz bezpośrednio przekazać identyfikator formularza.

阳光 Emi
źródło
2

Musiałem użyć element.attr('form')zamiast element.form.

Używam Firefoksa w Fedorze 12.

Nikov
źródło
0

po prostu jako:

alert( $(this.form).attr('name') );
sadnix
źródło
0

I jeszcze jeden....

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
źródło
0

Ten przykład funkcji JavaScript jest wywoływany przez detektor zdarzeń w celu zidentyfikowania formularza

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;
STEM FabLab
źródło
-2

czy to zadziała? (pozostawiając puste pola akcji z powrotem do siebie, prawda?)

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

„this” byłby wybranym elementem, .form byłby jego formą nadrzędną. Dobrze?

Josh P
źródło