如果使用 vanilla javascript 在一個頁面中存在多個具有相同 class 名稱的 forms，如何在提交時定位特定表單？

Question

我對一個普通的 JS function 感興趣，它將針對提交的特定表單，同時在同一頁面上有多個 forms 具有相同的 class 名稱。 使用 ID 不是每個表單的選項。

假設我在某些頁面上有 10 個 forms，如下所示：

<form class="add_to_cart">
    <div class="btn btn__add_to_cart">Add To Cart</div>
    <input type="hidden" id="some_product_id">
</form>

如何使用 JS（請不要 jQuery）獲取單擊div元素的特定表單（我沒有故意使用button元素，我對div選項感興趣）？

非常感謝您的幫助。

Answer 1

真正的問題是你做這件事的方式比它需要的更困難

如果你只是這樣做：

<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>

單擊按鈕將提交正確的表單。 如果您願意，可以使用 CSS 重新設置按鈕的樣式

但...

如果你的 div 是必要的，你可以做類似的事情

document.querySelectorAll("DIV").forEach(function(elem) {
  elem.addEventListener("click", function(e) {
    e.target.closest("form").submit();
  });
}

Answer 2

不知道你想用它做什么，但這里是一個使用類btn和btn__add_to_cart的點擊處理程序，它們是一個 div。

我還為最近單擊的表單添加了表單提交處理程序。

 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>