时间戳

首页 > 解决方案 > 如何在javascript中的onclick后延迟重定向？

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

问题描述

我正在尝试延迟页面的重定向，以便可以看到成功消息。到目前为止，我还没有运气。我试图setTimeout用 the来阻止它，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';
    }
})

标签： javascripthtmlforms

解决方案

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

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

推荐阅读