如何使用jQuery的形式代替信息提交

Question

這裏是我的形式，

<div id="myForm"> 
    <form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"> 
     <div class="row uniform"> 
      <div class="6u 12u$(medium)"> 
       <input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required /> 
      </div> 
      <div class="6u 12u$(medium)"> 
       <input type="email" name="email" id="email" value="" placeholder="enter your email address" required /> 
      </div> 
      <div class="6u 12u$(medium)"> 
       <textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea> 
      </div> 
      <div class="6u 12u$"> 
       <ul class="actions"> 
        <li><input type="submit" value="Submit" class="special" /></li> 
       </ul> 
      </div> 
     </div> 
    </form> 
</div> 

我想替換的形式，感謝您提交關於選擇提交按鈕，此刻它只是刷新頁面並且不會替換表單，我不希望它刷新我希望它提交的頁面並淡入一條消息，表示感謝您提交您的詳細信息。

，這裏是我的jQuery

<script> 
    $("#contact-form").submit(function(){ 
    $("#myForm").html("thank you for submitting your details."); 
    }); 
    </script> 

請你能幫忙嗎？

Answer 1

在這種情況下，你會想看看使用ajax表單。如果您按原樣提交，則會回發並刷新頁面。 Ajax將發佈數據而不改變頁面上的任何內容。

http://api.jquery.com/jquery.post/

jQuery AJAX submit form

然後，一旦數據被髮送，如你所願，你可以操縱DOM。這也將允許您根據數據是否正確保存以及是否正確顯示不同的消息。

Answer 2

我們必須以提交而無需刷新頁面來創建一個Ajax調用：

$("#contact-form").submit(function(e) { 
    e.preventDefault(); 
    $.post($(this).attr('action'), $(this).serialize()); 
    $("#myForm").html("thank you for submitting your details."); 
}); 

https://jsfiddle.net/u2gyocj7/1/

您可以在網絡選項卡一看，顯示POST數據