如何延迟javascript中onclick后的重定向

Question

我正在尝试延迟页面的重定向，以便可以看到成功消息。到目前为止，我还并没有得到任何运气。我试图用setTimeout和location.href来阻止它，但这似乎不起作用。有人能给我指正确的方向吗？

//表单

<form class="form" action="/" method="GET">
<div class="alert"></div>
<input type="text" class="textfields name" name="name" required placeholder="Name">
<input type="email" class="textfields email" name="email" required placeholder="Email">
<textarea class="message" placeholder="Your Message..."></textarea>
<button type="submit" class="footbtn">Send</button>
</form>
// Code 
footBtn.addEventListener('click', (e) => {
const alertMessage = document.querySelector('.alert');
const email = document.querySelector('.email').value;
const name = document.querySelector('.name').value;
if (name === '' || email === '') {
alertMessage.innerHTML = 'Name/Email Required';
alertMessage.style.padding = '10px';
alertMessage.style.color = 'red';
e.preventDefault();
} else {
alertMessage.innerHTML = 'Thanks! Someone will be in touch with you soon!';
alertMessage.style.color = 'black';
alertMessage.style.padding = '10px';
alertMessage.style.textAlign = 'center';
}
})

Answer 1

您需要阻止默认操作，并在延迟后手动提交表单。此外，监听表单的提交事件，而不是提交按钮上的单击事件。

let form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const alertMessage = document.querySelector('.alert');
const email = document.querySelector('.email').value;
const name = document.querySelector('.name').value;
if (name === '' || email === '') {
alertMessage.innerHTML = 'Name/Email Required';
alertMessage.style.padding = '10px';
alertMessage.style.color = 'red';
} else {
alertMessage.innerHTML = 'Thanks! Someone will be in touch with you soon!';
alertMessage.style.color = 'black';
alertMessage.style.padding = '10px';
alertMessage.style.textAlign = 'center';
setTimeout(()=>form.submit(), 700);
}
})