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

Question

I need help in figuring out what's happening with my confirmation message when the form submits. I'm creating a contact form with Bootstrap using jQuery, AJAX and PHP (mail function) to validate it. I want the form to hide and then display the confirmation message but for some reason, when the form submits, the confirmation message shows at the bottom of the form briefly (for 2 seconds) before hiding and then displaying the confirmation message. I can't figure out why this is happening.

Here's my HTML code:

<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>

Here's the jQuery code:

$(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

You are displaying the confirmation message before making the ajax request, and hiding the form after receiving the response, which explains what you're describing.

You can fix it by displaying the confirmation message and hiding the form at the same time:

$(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

        }
  });
}