2010-12-13 32 views
30
function getInputElements() { 
    var inputs = document.getElementsByTagName("input"); 
} 

Powyższy kod pobiera wszystkie elementy input na stronie, która ma więcej niż jeden formularz. Jak mogę uzyskać elementy input konkretnego formularza za pomocą zwykłego kodu JavaScript?pobierz wszystkie elementy określonego formularza

Odpowiedz

11
document.forms["form_name"].getElementsByTagName("input"); 
+36

tak długo, jak nie ma zaznaczeń ani tekstów ;-) – Gurnard

+0

Czy możesz pokazać to w przypadku użycia aplikacji z kilkoma wejściami z wartościami, które przechwytuje? –

+0

Wolę 'document.forms [" nazwa_formularza "]. GetElementByClassName (" myClass ")' –

3
var inputs = document.getElementById("formId").getElementsByTagName("input"); 
var inputs = document.forms[1].getElementsByTagName("input"); 
0

Jak chcesz rozróżniać formy? Można stosować różne identyfikatory, a następnie skorzystać z tej funkcji:

function getInputElements(formId) { 
    var form = document.getElementById(formId); 
    if (form === null) { 
     return null; 
    } 
    return form.getElementsByTagName('input'); 
} 
79
document.getElementById("someFormId").elements; 

Kolekcja ta będzie także zawierać <select> elementy, ale prawdopodobnie chcesz tego.

+0

Wygląda na to, że document.getElementById ("someFormId") również działa. Jakiś konkretny powód dodawania elementów na końcu? – Andrew

+2

@Andrew: Moim zamiarem było, aby "someFormId" było identyfikatorem elementu "

", a nie wprowadzeniem. "elementy" jest właściwością elementu formularza; to zbiór elementów w formularzu. Zobacz https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.elements –

+1

> ok, rozumiem czym jest .elements. Więc powinienem go użyć, jeśli działa bez niego? Może dodanie .elements wybiera mniej węzłów i dzięki temu masz lepszą wydajność? – Andrew

7

Możliwe jest również, aby skorzystać z tej:

var user_name = document.forms[0].elements[0]; 
var user_email = document.forms[0].elements[1]; 
var user_message = document.forms[0].elements[2]; 

Wszystkie elementy formy są przechowywane w tablicy przez JavaScript. To bierze elementy z pierwszej formy i przechowuje każdą wartość w unikalnej zmiennej.

13

Wszyscy koncentrują się na słowie "get" w pytaniu. Wypróbuj właściwość 'elements' dowolnej formy, która jest kolekcją, którą możesz iterować, np. Napisać własną funkcję "get".

przykład:

function getFormElelemets(formName){ 
    var elements = document.forms[formName].elements; 
    for (i=0; i<elements.length; i++){ 
    some code... 
    } 
} 

nadzieja, że ​​pomaga.

4

prosty kod Formularz

<form id="myForm" name="myForm"> 
     <input type="text" name="User" value="Arsalan"/> 
     <input type="password" name="pass" value="123"/> 
     <input type="number" name="age" value="24"/> 
     <input type="text" name="email" value="[email protected]"/> 
     <textarea name="message">Enter Your Message Her</textarea> 

    </form> 

kod Javascript

//Assign Form by Id to a Variabe 
    var myForm = document.getElementById("myForm"); 
    //Extract Each Element Value 
    for (var i = 0; i < myForm.elements.length; i++) { 
    console.log(myForm.elements[i].value); 
    } 

JSFIDDLE: http://jsfiddle.net/rng0hpss/

+0

Myślę, że to zwróci divy, obejmuje także ... – Stranger

+0

to zwróci [tablica elementów 'input'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), z wyjątkiem 'type =" image "' – Mike

3

Użyj tego

var theForm = document.forms['formname'] 
[].slice.call(theForm).forEach(function (el, i) { 
    console.log(el.value); 
}); 

el oznacza szczególny element formularza. Lepiej jest użyć tego niż pętla foreach, ponieważ pętla foreach również zwraca funkcję jako jeden z elementów. Jednak to zwraca tylko elementy DOM formularza.

1

Jeśli masz odniesienie do dowolnego pola formularza lub zdarzenia, nie musisz wyraźnie wyszukiwać formularza, ponieważ każde pole formularza ma atrybut form, który wskazuje na jego formularz nadrzędny.

Jeśli masz zdarzenie, będzie ono zawierało atrybut target, który wskaże pole formularza, które go wywołało, co oznacza, że ​​możesz uzyskać dostęp do formularza przez myEvent.target.form.

Oto przykład bez kodu wyszukiwania formularza.

<html> 
<body> 
    <form name="frm"> 
     <input type="text" name="login"><br/> 
     <input type="password" name="password"><br/> 
     <button type="submit" onclick="doLogin()">Login</button> 
    </form> 
    <script> 
     function doLogin(e) { 
      e = e || window.event; 
      e.preventDefault(); 
      var form = e.target.form; 
      alert("user:" + form.login.value + " password:" + form.password.value); 
     } 
    </script> 
</body> 
</html> 

Jeśli masz wiele formularzy na stronie nadal nie trzeba opisać je według nazwy lub identyfikatora, ponieważ zawsze otrzymasz właściwą instancję formularz poprzez imprezy lub poprzez odniesienie do pole.

Powiązane problemy