提交 html 表单上显示成功消息

Question

我试图在提交按钮上方显示一条成功消息，但它\xe2\x80\x99s 将我定向到表单页面。这里是。

\n

我在尝试着：

\n

<!-- The form is on the deck.html page -->\n<div class="row footer-newsletter justify-content-center">\n    <div class="col-lg-6">\n        <form action="forms/subscribe.php" method="post">\n            <input type="email" name="email" placeholder="Enter your Email"><input type="submit" value="Subscribe">\n        </form>\n    </div>\n

\n

我在电子邮件中收到表单输入，那么下面的代码哪里错了？

\n

    // Create email headers\n    $headers = \'From: \' . $email_from . "\\r\\n" .\n    \'Reply-To: \' . $email_from . "\\r\\n" .\n    \'X-Mailer: PHP/\' . phpversion();\n    @mail($email_to, $email_subject, $email_message, $headers);\n?>\n\n<!-- include your own success HTML here.\n\n    So I am getting form details to email, but the success\n    message below is appearing on /forms/subscribe.php\n    where actually I am looking to display just above\n    button\n\n-->\n\n    Thank you for contacting us. We will be in touch with you very soon.\n\n<?php\n

\n

我尝试了提交弹出窗口、警报框，但它总是将我带到订阅页面，并且我希望在订阅按钮之前显示。

\n

\n

Answer 1

我们需要：

1. 捕获并停止提交事件继续
2. 显示消息
3. 一段时间后（假设 2 秒），继续提交。

检查下面的代码：

我们将事件侦听器附加到表单。当“提交”事件发生时，我们要执行我们的代码。变量e代表事件。我们希望阻止事件执行其正常操作（在本例中，将用户发送到另一个页面），因此我们说e.preventDefault()。

我创建了一个p元素，其消息位于表单顶部。这个元素默认是隐藏的，但是如果我们show向它添加一个类，它就会出现。所以，这就是我们所做的。阻止事件继续后，我们将此类添加到消息中。

最后，我们使用该setTimeout()函数计数到 2 秒（2000 毫秒），然后执行form.submit()，这会将用户发送到订阅页面。

const form = document.querySelector('form');
const thankYouMessage = document.querySelector('#thank-you-message');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  thankYouMessage.classList.add('show');
  setTimeout(() => form.submit(), 2000);
});

#thank-you-message {
  display: none;
}

#thank-you-message.show {
  display: block;
}

 <p id="thank-you-message">
   Thank you for contacting us. We will be in touch with you very soon.
 </p>
 <form action="forms/subscribe.php" method="post">
   <input type="email" name="email" placeholder="Enter your Email">
   <input type="submit" value="Subscribe">
 </form>