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。如果正确完成，这还允许您根据数据是否正确保存来显示不同的消息。

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

2 个答案: