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

Question

i am trying to display success message just above submit button but its directing me to form page.Here is what i am trying to do-

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

i am getting form inputs on my email so where i am wrong in below code

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

i tried on submit pop up,alert box but it always took me to subscribe page and i am looking to display just before subscribe button

Answer 1

What we need to do is:

1. Capture and stop the submit event from continuing
2. Show the message
3. After some time (let's say 2 seconds), continue the submission.

Check the code below:

We attach an event listener to the form. When the 'submit' event happens, we want to execute our code. The e variable represents the event. We want to stop the event from doing its normal stuff (in this case, send the user to another page) so we say e.preventDefault() .

I created a p element with the message on top of the form. This element is hidden by default, but if we add a class show to it, it appears. So, that's what we do. After preventing the event from continuing, we add this class to the message.

Finally, we use the setTimeout() function to count to 2 seconds (2000 ms) and then execute form.submit() , which sends the user to the subscribe page.

 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>