javascript - 提交后，确认消息将粘贴在联系表单的底部

Question

我需要帮助来弄清楚表单提交时我的确认消息发生了什么。我正在使用 jQuery、AJAX 和 PHP(邮件功能)使用 Bootstrap 创建联系表单来验证它。我希望表单隐藏然后显示确认消息，但由于某种原因，当表单提交时，确认消息会在隐藏然后显示确认消息之前短暂显示在表单底部(2 秒)。我不明白为什么会发生这种情况。

这是我的 HTML 代码:

<div id="contact" class="container-fluid">
  <div class="col-md-6 col-md-offset-3 col-lg-6 col-md-offset-3 container-backdrop ">
    <form data-toggle="validator" role="form" action="php/contact.php" id="contactForm" method="post">
      <div class="row">
        <h1 class="form">Say Hello!</h1>
        <br>
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="fullname" placeholder="Full Name" required type="text">
          <div class="help-block with-errors"></div>
        </div>
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="email" placeholder="Email" required type="email">
          <div class="help-block with-errors"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 form-group">
          <input class="form-control" id="subjectline" placeholder="Subject" required type="text">
          <div class="help-block with-errors"></div>
        </div>
      </div>
      <div class="col-md-12 form-group">
        <div class="row">
          <textarea class="form-control input-lg" id="message" name="Message" rows="6" placeholder="Message" required></textarea>
          <div class="help-block with-errors"></div>
        </div>
      </div>
      <div class="btn-group-wrap">
        <div class="btn-group">
          <div class="col-md-4">
            <button class="btn btn-success btn-lg" type="submit">Submit</button>
          </div>
        </div>
      </div>
    </form>
    <div id="msgSubmit" class="h3 text-center hidden">Message sent! Thanks for stopping by!</div>
  </div>
</div>

这是 jQuery 代码:

$(document).ready(function() {
  $("#contactForm").validator().on("submit", function(event) {
    if (event.isDefaultPrevented()) {} else {
      event.preventDefault();
      $("#msgSubmit").removeClass("hidden");
      submitForm();
    }
  });
});

function submitForm() {
  var name = $("#fullname").val();
  var email = $("#email").val();
  var subjectline = $("#subjectline").val();
  var message = $("#message").val();
  // Initiate Variables With Form Content

  $.ajax({
    type: "POST",
    url: "php/contact.php",
    data: "fullname=" + fullname + "&email=" + email + "&message=" + message + "&subjectline" + subjectline,
    success: function(text) {
      $("#msgSubmit").removeClass("hidden");
      1000;
      $("#contactForm").hide();
    }
  });
}

Answer 1

您在发出 ajax 请求之前显示确认消息，并在收到响应后隐藏表单，这解释了您所描述的内容。

您可以通过显示确认消息并同时隐藏表单来修复此问题:

$(document).ready(function() {
    $("#contactForm").validator().on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            // note here
            submitForm();
        }
    });

});

function submitForm(){

  var name = $("#fullname").val();
  var email = $("#email").val();
  var subjectline = $("#subjectline").val();
  var message = $("#message").val();
    // Initiate Variables With Form Content

    $.ajax({
      type: "POST",
      url: "php/contact.php",
      data: "fullname=" + fullname + "&email=" + email + "&message=" + message + "&subjectline" + subjectline,
      success : function(text){
        $("#msgSubmit" ).removeClass("hidden");
         1000; 
              $("#contactForm").hide();
              $("#msgSubmit").removeClass("hidden"); // and here

        }
  });
}