CODEWITHSUNDEEP
javascriptphpjqueryajax
user1818326
user1818326

Reputation: 21

Hide Form when submit

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?

Upvotes: 0

Views: 88

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11472

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.

Upvotes: 1

Fixer
Fixer

Reputation: 185

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

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

Upvotes: 1

Related Questions