提交后确认消息贴在联系表格的底部

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

        }
  });
}