Das Formular wird trotz „preventDefault()“ aufgrund eines anderen EventListeners gesendet ⇐ HTML

[Anonymous]

Ich habe zwei EventListener, einen für die Bearbeitung eines Formulars und den anderen für die Schaltflächen „Zum Warenkorb hinzufügen“. Wenn die Ereignisse ausgelöst werden, wird eine Post-Anfrage an den Server gesendet, der die entsprechenden Daten verarbeitet. Daher muss das Formular nicht gesendet, sondern vom Server verarbeitet werden.
Vor der Implementierung der EventListeners, die die Schaltflächen „Zum Warenkorb hinzufügen“ verarbeiten, funktionierte das Formular wie vorgesehen mit der Verwendung von event.preventDefault();. Mit dem EventListener der Schaltflächen wird das Formular jetzt jedoch gesendet und leitet mich zu /login weiter. Ich habe jede Lösung ausprobiert, die ich gefunden habe. Ich habe .stopPropagation(), .preventDefault() und return=false; für beide Listener verwendet und die Schaltflächen in div-Elemente geändert. Allerdings funktioniert das Formular nicht wie beabsichtigt, es sei denn, ich entferne den zweiten EventListener vollständig.
Ich würde das Formularelement weiterhin durch ein div ersetzen, aber es muss ein HTML-Formular bleiben, also muss ich eine Lösung dafür finden.
Ich füge den folgenden Code ein, vielen Dank im Voraus:

Code: Select all

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[i].id == btn.dataset.productId){
product_selected = products[i];
}
}
addToCart(product_selected);

});

});

}, 1000);