提交时隐藏表格

Question

I have the following function:

var form = $('#review-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status center"></div>');
    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: form.serialize(),
        beforeSend: function(){
            form.prepend(
                form_status
                    .html('<p><i class="fa fa-spinner fa-spin"></i> Sending...</p>')
                    .fadeIn()
            );
        }
    }).done(function(data){
        form_status
            .html('<p class="text-success">Thanks!</p>')
            .delay(3000)
            .fadeOut();
    });
});

Is there a way to hide the form when mail is sent?

Answer 1

form.hide(); after your form_status in done function.

NOTE: I added this as answer because I cannot add comments

Answer 2

You can use fadeOut() on the form too in the done promise:

  var form = $('#review-contact-form');
  form.submit(function(event) {
    event.preventDefault();
    var form_status = $('<div class="form_status center"></div>');
    $.ajax({
      type: "POST",
      url: $(this).attr('action'),
      data: form.serialize(),
      beforeSend: function() {
        form.prepend(
          form_status
          .html('<p><i class="fa fa-spinner fa-spin"></i> Sending...</p>')
          .fadeIn()
        );
      }
    }).done(function(data) {
      form.fadeOut();
      form_status
        .html('<p class="text-success">Thanks!</p>')
        .delay(3000)
        .fadeOut();
    });
  });

Also, if you have the .form_status and .text-success elements inside the form move it outside of it, otherwise you won't be able to see the message when the form submit is done.