我有一個表格可以查詢價格。價格通過 Ajax（是不是 - 不確定？）請求回傳，然后顯示同一表單中的提交按鈕。
只停留在第一個查詢按鈕上，如果我使用formQuote.addEventListener('submit', (event) => {價格已加載并顯示第二個按鈕。但是，如果我使用btnPricecheck.addEventListener('submit', (event) => {如下所示，頁面會重新加載，洗掉所有輸入的資料（注意formQuote與btnPricecheck之前addEventListener）。這是第 5 行代碼。
const formQuote = document.querySelector('#quote');
if (formQuote) {
btnPricecheck = document.getElementById('btn-pricecheck');
btnEnquiry = document.getElementById('btn-enquiry');
btnPricecheck.addEventListener('submit', (event) => {
event.preventDefault();
fromDate = formQuote.elements["fromDate"].value;
toDate = formQuote.elements["toDate"].value;
apptmnt = $('input[name="apptmnt"]:checked').val();
parameters = '';
if (fromDate) parameters = 'fromDate=' fromDate;
if (toDate) parameters = '&toDate=' toDate;
if(apptmnt) {
if (parameters.length > 1) {
parameters = '&apptmnt=' apptmnt
}
else {
parameters = 'apptmnt=' apptmnt
}
}
console.log( parameters);
$('#priceDisplay').load('forms/quote.php?' parameters);
if (document.getElementById('total'))
showPersonForm();
window.scrollTo(0,document.body.scrollHeight);
});
btnEnquiry.addEventListener('submit', (event) => {
// disable default action
event.preventDefault();
var cpFields = ['surname', 'firstName', 'email', 'street', 'zip', 'city', 'country', 'phone', 'notes'];
for (var fld in cpFields) {
document.getElementById("c_" fld).value = document.getElementById(fld).value;
}
// configure a request
const xhr = new XMLHttpRequest();
xhr.open('POST', 'forms/confirmation.php');
// Define what happens on successful data submission
xhr.addEventListener( 'load', function( event ) {
alert( 'Yeah! Data sent and response loaded.' );
console.log(xhr.responseText);
} );
// Define what happens in case of error
xhr.addEventListener(' error', function( event ) {
alert( 'Oops! Something went wrong.' );
console.log(xhr.responseText);
} );
// prepare form data
let data = new FormData(formQuote);
// send request
xhr.send(data);
// listen for `load` event
xhr.onload = () => {
console.log(xhr.responseText);
}
});
}更新：我注意到，fromDate = formQuote.elements["fromDate"].value;在這里幾乎不能作業，但fromDate = document.getElementById["fromDate"].value;也不能
uj5u.com熱心網友回復：
在第二種情況下，事件處理程式沒有運行，因此event.preventDefault()也沒有執行，因此瀏覽器將您的表單發送到 URL 其（我的意思是<form>'s）action屬性（如果您沒有指定，這可能只是當前頁面的地址）。它看起來像“頁面重新加載并且資料被清除”。
為什么會發生這種情況？因為按鈕不會觸發submit事件，所以你附加的處理程式永遠不會被呼叫。
雖然，您可以在樹的上層設定事件處理程式，而不是它（事件）實際發生。比如說，你可以submit打開事件處理程式<body>，它會由于事件冒泡而被執行。但是由于冒泡永遠不會發生在較低的元素（孩子）上，而只會發生在較高的（父母）身上，所以在這里對你沒有幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337048.html
標籤：javascript 形式 添加事件监听器 事件监听器