2016-06-02 20 views
1

Ich habe ein Array von allen forms in meiner Seite. Ich möchte alle Formulare durchlaufen und die darin enthaltenen Schaltflächen finden. Wie erreiche ich das in Javascript alleine, ohne Bibliotheken?Finde Kinder eines bestimmten Typs

Hier ist meine JS-Code:

var forms = document.querySelectorAll('form'); 

for(var i = 0; i < forms.length; i++;){ 
    var form = forms[i]; 
    form.addEventListener('submit', validateForm); 
} 

function validateForm(e){ 
    e.preventDefault();  
    var button = ?; // I want to get the button that is a child of this form 
} 

Ich weiß, dass ich diese verwenden können alle Tasten zu erhalten, die Kinder einer Form sind:

var buttons = document.querySelectorAll('form button'); 

Aber wie kann ich nur eins zu bekommen Knopf, der ein Kinder dieses Formular ist?

Ich habe diese Frage mehrmals gestellt, aber es war immer die Kinder eines Elternteils zu finden, der bekannt war, mit einer bestimmten id oder so ähnlich. Ich habe keine Ahnung, wie viele Formulare es auf der Seite gibt, und ich habe keine Kontrolle darüber, ob sie nicht eindeutig id oder irgendetwas anderes, das verwendet werden könnte, um sie zu unterscheiden, wenn Sie querySelectorAll() verwenden.

Ist es möglich zu erreichen, was ich will?

Ich bin auf der Suche nach der reinen JS Alternative dazu in jQuery:

var $form = $('form'); 
var $childButton = $form.find('button'); 

Antwort

3

Element hat, kann gleichwertige Versionen von querySelector/All und so aus den Elementen sowie Dokument genannt werden. Also, wenn Sie für eine Schaltfläche in einem Formular-Element suchen, können Sie nur querySelector rufen aus dem Formularelement

var form = document.querySelector("#SomeForm"); 
//Will find the first button in the form 
var someBtn = form.querySelector("button"); 
//Will find all buttons in the form. 
var someBtns = form.querySelectorAll("button"); 

Demo

let forms = document.querySelectorAll("form"); 
 
[].forEach.call(forms,form=>{ 
 
    form.querySelector("button").innerText += " - Modified"; 
 
});
<form> 
 
    <button>A button</button><br> 
 
    <input><input> 
 
</form> 
 
<form><br><br> 
 
    <button>B button</button><br> 
 
    <input><input><br> 
 
    <button>C button</button> 
 
</form><br><br> 
 
<form> 
 
    <button>D button</button><br> 
 
    <input><input> 
 
</form>

+0

Das war so einfach, ich kann nicht glauben, dass ich das nicht versucht habe oder das vorher gefunden habe .. danke! – Drown

0

Wenn Sie die erste button auswählen möchten Nachkomme, können Sie querySelector verwenden.

Aber wenn Sie sicherstellen wollen, dass es ein Kind ist, dann können Sie [].find verwenden:

[].find.call(form.children, function(child) { 
    return child.tagName.toLowerCase() === 'button'; 
}); 

Alternativ einige Browser unterstützen die :scope psudo-Klasse:

form.querySelector(":scope > button"); 

Hoffentlich es gewann‘ t zusammen mit Scoped Stylesheets und @scope at-Regel entfernt werden.

0

Ihre Frage ist nicht wirklich klar. Es gibt eine document.forms Sammlung, die alle Formulare in einem Dokument in DOM Ordnung ist, so:

var firstForm = document.forms[0]; 

wird die erste Form erhalten.Wenn Schaltflächen Namen haben, können Sie auf die Schaltfläche mit dem Namen „Fred“ in der ersten Form mit bekommen:

var fred = document.forms[0].Fred; 

Oder der ersten Schaltfläche in der ersten Form mit:

var firstButton = document.forms[0].querySelector('button'); 

oder alle Tasten in der ersten Form mit:

var firstButton = document.forms[0].querySelectorAll('button'); 

und so weiter. Beachten Sie, dass Formularsteuerelemente mit einem Formular unter Verwendung des Formulars Attribut zugeordnet werden können, aber nicht innerhalb des Formulars sein. Z.B.

<form id="foo"> 
    <!-- stuff in the form --> 
</form> 
<button type="submit" for="foo">Submit the form</button> 

In diesem Fall wird die querySelector Syntax nicht aber Formulareigenschaft Zugang nicht der Fall, so dass Sie über die Elemente Sammlung des Formulars auf Schleife benötigen:

for var i=0, firstButton; i<firstForm.elements.length; i++) { 
    if (firstForm.elements[i].tagName.toLowerCase() == 'button') { 
    // This is the first button associated with the form, 
    // even if not actually in the form 
    } 
} 

Also, wenn Sie wollen Abdeckung alle Fall, Ihr Code muss sehr generisch sein. Aber wenn Sie die wahrscheinlichen Szenarien eingrenzen, ist der Code sehr viel einfacher.

Verwandte Themen