javascript - 提交时隐藏表单

Question

我有以下功能:

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();
    });
});

有没有办法在发送邮件时隐藏表单？

Answer 1

您也可以在 done promise 中的 form 上使用 fadeOut():

  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();
    });
  });

此外，如果表单内有 .form_status 和 .text-success 元素，请将其移到表单外，否则您将无法看到表单提交完成时的消息。