I have an array of all the
forms
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
}
var buttons = document.querySelectorAll('form button');
id
id
querySelectorAll()
var $form = $('form');
var $childButton = $form.find('button');
Element has equivalent versions of querySelector/All and so can be called from elements as well as document. So if you are looking for a button inside a form element you can just call querySelector from the form element
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>