javascript - 如何在提交时使用jQuery替换表单中的信息

这是我的表格，

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

请你帮忙

最佳答案

我们必须创建一个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数据

关于javascript - 如何在提交时使用jQuery替换表单中的信息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34454197/