Estoy interesado en una función Vanilla JS que se enfocará en el formulario específico que se envió al tener múltiples formularios con el mismo nombre de clase en la misma página. El uso de ID no es una opción para cada formulario.
Digamos que tengo 10 formularios como el siguiente en alguna página:
<form class="add_to_cart"> <div class="btn btn__add_to_cart">Add To Cart</div> <input type="hidden" id="some_product_id"> </form> ¿Cómo puedo obtener con JS (no jQuery, por favor) el formulario específico en el que se hizo clic en el elemento div (no usé el elemento de button a propósito, estoy interesado en la opción div )?
Realmente apreciaré su ayuda.
El verdadero problema es que estás haciendo esto de una manera más difícil de lo que debe ser.
Si solo haces:
<form class="add_to_cart"> <input type='submit' class="btn btn__add_to_cart" value='Add To Cart' /> <input type="hidden" id="some_product_id"> </form>Al hacer clic en el botón se enviará el formulario correcto. Puede cambiar el estilo del botón usando CSS si lo desea.
PERO...
Si los divs son necesarios, puedes hacer algo como
document.querySelectorAll("DIV").forEach(function(elem) { elem.addEventListener("click", function(e) { e.target.closest("form").submit(); }); }No estoy seguro de lo que quiere hacer con él, pero aquí hay un controlador de clics que usa las clases btn y btn__add_to_cart que son un div.
También agregué un controlador de envío de formulario para el formulario más cercano en el que se hizo clic.
let submitEvent = new CustomEvent("submit", { "bubbles": true, "cancelable": true }); function logSubmit(event) { console.log(`Form Submitted! Time stamp: ${event.timeStamp}`); let button = event.currentTarget.querySelectorAll('input')[0]; console.log(`Form button ID: ${button.id}`); event.preventDefault(); } var evt = new CustomEvent("submit", { "bubbles": true, "cancelable": true }); let allforms = document.querySelectorAll('form.add_to_cart'); Array.from(allforms).forEach(function(element) { element.addEventListener('submit', logSubmit); }); function clickedMe(event) { console.log(event.currentTarget === this) // logs `true` let closestForm = event.currentTarget.closest('form.add_to_cart'); console.log("My Classes:", this.className); closestForm.dispatchEvent(submitEvent); } const clickableButtons = document.querySelectorAll(`div.btn.btn__add_to_cart`); console.log(clickableButtons.length); Array.from(clickableButtons).forEach(function(element) { element.addEventListener('click', clickedMe, false); }); <form class="add_to_cart"> <div class="btn btn__add_to_cart">Add To Cart</div> <input type="hidden" id="some_product_id"> </form> <form class="add_to_cart"> <div class="btn btn__add_to_cart">Add To Cart 2</div> <input type="hidden" id="some_product_id2"> </form>