如何在提交时使用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数据

Answer 2

在这种情况下，您将需要考虑使用ajax表单。如果您按原样提交，那么它将回发并刷新页面。Ajax将在不更改页面上任何内容的情况下发布数据。

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

jQuery AJAX submit form

然后，一旦发送了数据，您就可以随心所欲地操作DOM。这还允许您根据数据是否正确保存来显示不同的消息。