Znajdowanie FORMULARZA, do którego należy element w JavaScript

Question

Jak mogę się dowiedzieć, która FORMA zawiera element HTML za pomocą prostego/małego fragmentu JavaScript? W poniższym przykładzie, jeśli mam już dostęp do SPANU o nazwie "wiadomość", w jaki sposób mogę łatwo dostać się do elementu FORM?

<form name="whatever"> 
    <div> 
     <span id="message"></span> 
    </div> 
</form> 

rozpiętości mogą być zagnieżdżone w innych tabelach lub DIV, ale wydaje się zbyt rozwlekły iteracyjne wokół .parentElement i pracować moją drogę w górę drzewa. Czy istnieje prostsza i krótsza droga?

Gdyby to nie był SPAN, ale element INPUT, byłoby to łatwiejsze? Czy mają właściwość, która wskazuje na zawierający FORMULARZ? Google mówi nie ...

Answer 1

Do formularza, do którego należy element, można uzyskać dostęp przez element.form.

Gdy element, którego używasz jako odniesienia, nie jest elementem formularza, nadal musisz wykonać iterację poprzez parentElement lub użyć innego rodzaju selektora.

Korzystanie prototyp, można uprościć to za pomocą Element.up():

$(element).up('form'); 

Otheranswers na to pytanie nie zauważył, jak zrobić to samo w jQuery.

Answer 2

Można cofnąć w drzewie DOM, aż dojdziesz do prawego węzła:

node = document.getElementById("message"); 
while (node.nodeName != "FORM" && node.parentNode) { 
    node = node.parentNode; 
} 

Answer 3

Chyba trzeba wykonać iterację wszystkich elementów wtedy. Można spróbować użyć jQuery:

$("input").parent("form") 

http://docs.jquery.com/Traversing/parent#expr

Answer 4

Albo mały jQuery (pomijając sam jQuery):

$("#message").parents("form:first") 

Answer 5

Inne niż node.parentNode, nie wierzę, że jest to sposób na znalezienie konkretnego przodka danego węzła. Większość bibliotek zwykle robi to, co opisujesz i iteruje za pośrednictwem parentNode.

Jeśli nie używasz biblioteki takiej jak prototyp, jquery lub Ext, to prawdopodobnie byłby to dobry pomysł. W tej chwili rozwiązali wszystkie niekompatybilności i dziwactwa w DOM, aby większość takich operacji była drobiazgowa.

Answer 6

chodzi gumbo Post: Aż prototypu i jQuery są przydatne, niektórzy ludzie nie realizują je w swoich projektach.

Czy ktoś mógłby wyjaśnić, dlaczego rozwiązanie Gumbo zostało zdegradowane, poza tym, że powtórzył to, co pierwotnie chciał uniknąć OP?

node = document.getElementById(this.id); 
while (node.nodeName != "FORM" && node.parentNode) { 
    node = node.parentNode; 
} 

 

Aby odpowiedzieć PO za pytanie: przejechanie DOM to najszybszy sposób, aby osiągnąć ten efekt - jest realizowane przez 1 postrzegane Speed) lepiej napisany kod JS, lub 2) czas realizacji (jeśli przechowujesz formularz przy ładowaniu strony dla tego elementu, nadal będziesz przechodzić, ale będziesz miał szybsze wywoływanie zmiennej przechowywanej, gdy będziesz potrzebować odzyskać te informacje).

Brak atrybutów zagnieżdżonych w elementach nieformalnych, które kojarzyłyby się z formularzem (span.form nie istnieje).

Jeśli do generowania strony używasz skryptu (php/perl), a będziesz wykonywać wiele wywołań do formularza, możesz osadzić identyfikator formularza w kodzie HTML tego elementu. Mimo to musiałoby to nastąpić.

Mam nadzieję, że to pomaga,

vol7ron

Answer 7

Dlaczego nie wystarczy użyć:

var nodesForm = node.form; 

? Działa na FF3, FF4, google chrome, Opera, IE9 (testowałem sam siebie)