我有一张表格要查询价格。价格通过Ajax请求返回，然后显示同一表单中的提交按钮。
只是停留在第一个查询按钮，如果我使用formQuote.addEventListener('submit', (event) => {，价格被加载并显示第二个按钮。但是，如果我使用如下所示的btnPricecheck.addEventListener('submit', (event) => {，页面将重新加载，删除所有输入的数据(注意addEventListener之前的formQuote和btnPricecheck)。这是第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;也不能，
在第二种情况下，事件处理程序只是不运行，所以event.preventDefault()也没有执行，所以浏览器将您的表单发送到URL(我的意思是，<form>'s)action属性(这可能只是当前页面的地址，如果你没有指定任何)。它看起来像"页面重新加载，数据被清除"。
为什么会这样?因为按钮不触发submit事件，所以你附加的处理程序永远不会被调用。
submit事件处理程序放在<body>上，并且它将由于事件冒泡而执行。但是，由于冒泡从不发生在较低的元素(子元素)上，而只发生在较高的元素(父元素)上，因此在这里对您没有帮助。