javascript - 如何在提交时使用 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 调用才能在不刷新页面的情况下提交:

 $("#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 数据