提交“聯系”消息后，如何使它停留在頁面上並生成文本確認？

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