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

Question

I am trying to delay the redirect of my page so that the success message can be seen. So far I have not had any luck in getting it. I have tried to stop it with setTimeout with the location.href but that doesn't seem to be working. Can someone point me in the right direction?

//Form

 <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

You need to prevent the default action and manually submit the form after a delay. Also, listen for the submit event of the form instead of the click event on the submit button.

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);
    }
})