提交“联系”消息后，如何使它停留在页面上并生成文本确认？

Question

我之前已经在Stack Overflow上看到过这个问题，但是对于我的网站，却无法使以前的解决方案正常工作！

我在网站（ staging.twotailsmedia.com）上有一个“联系”页面。 现在，“联系方式”页面可以正常工作并将电子邮件发送到正确的位置，但是会产生“谢谢！” 新的，单独的，未格式化的页面上显示消息。 不是我想要的 我希望它保留在“联系人”页面上，生成“谢谢！” 在提交按钮旁边的表单上进行确认。

这是index.html文件中我表单的HTML ：

<form method="POST" action="mail.php">

   <div class="field half first">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" />
   </div>

<div class="field half">
   <label for="email">Email</label>
   <input type="text" name="email" id="email" />
</div>

<div class="field">
   <label for="message">Message</label>
   <textarea name="message" id="message" rows="4"></textarea>
</div>

<ul class="actions">
   <li><input type="submit" value="Send Message" class="special" /></li>
   <li><input type="reset" value="Reset" /></li>
</ul>

</form>

这是来自mail.php文件的PHP ：

<?php

        $name = $_POST['name'];

        $email = $_POST['email'];

        $message = $_POST['message'];

        $formcontent="From: $name \n Message: $message";

        $recipient = "info@emailaddress.com";

        $subject = "A message from the Two Tails MEdia website!";

        $mailheader = "From: $email \r\n";

        mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

        echo "Thank You! We'll get back to you.";
}
?>

通常，我只是从Wordpress获得一个Contact Form插件，但是我试图做一个非WP页面，以便对Web开发过程有更深入的了解。

Answer 1

使用Ajax提交您的表单，并成功显示您的消息。 试试这个代码：

$('form').submit(function(e){
   e.preventDefault();
   $.ajax({
     type:'post',
     url:'mail.php',
     data:$(this).serialize(),
     success:function(){
         $('form')[0].reset(); // to reset the form
         $('#contact').hide(); // to hide the Contact article
         $('#message').show(); // to show the hidden message
     }
   })
})