У меня есть два прослушивателя событий: один для обработки формы, а другой для кнопок «Добавить в корзину». Когда события запускаются, почтовый запрос отправляется на сервер, который обрабатывает соответствующие данные, поэтому мне нужно, чтобы форма не отправлялась, а обрабатывалась сервером.
До реализации EventListeners, который обрабатывает кнопки «Добавить в корзину», форма работала как задумано с использованием event.preventDefault();. Однако с помощью EventListener кнопок форма теперь отправляется и направляет меня в /login. Я испробовал каждое найденное решение, я использовал .stopPropagation(), .preventDefault() и return=false; для обоих слушателей, я изменил кнопки на элементы div. Однако форма не будет работать должным образом, пока я полностью не удалю второй EventListener.
Я бы заменил элемент формы на элемент div, но он должен оставаться в виде HTML-формы, поэтому мне нужно найти решение этой проблемы.
Я включаю приведенный ниже код, заранее спасибо:
window.onload =function formSubmit(){
const form = document.getElementById('login-form');
form.addEventListener('submit', event => {
event.preventDefault(); // prevent the form from submitting
const username = form.elements.username.value;
const password = form.elements.password.value;
login(username, password);
});
}
//addbuttons are added dynamically after the other elements are already loaded so im putting a timeout for queryselector to gather them
setTimeout(window.onload =function productRequest(){
const purchaseBtns = document.querySelectorAll('.purchase-button');
purchaseBtns.forEach((btn) =>{
btn.addEventListener('click', () => {
var product_selected;
for(i in products){
if(products.id == btn.dataset.productId){
product_selected = products;
}
}
addToCart(product_selected);
});
});
}, 1000);
Подробнее здесь: https://stackoverflow.com/questions/750 ... ntlistener
