Event.preventDefault() conflicting on Contact Form

Question

I have a contact form using Phpmailer which in one project worked perfectly. All return messages were done using CSS only, without Javascript. But now, in this new project, I want to use JS to make the messages look more beautiful.

So I used the following JS:

// Contact form
var form = $('#main-contact-form');
form.submit(function (event) {
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        beforeSend: function () {
            form.prepend(form_status.html('<p>Enviando Email...</p>').fadeIn());
        }
    }).done(function (data) {
        form_status.html('<p class="text-success">Obrigado por entrar em contato!</p>').delay(3000).fadeOut();
    });
});

When I send the form, the message appears "Thank you for contacting!" with the effect of delay and fadeOut, but does not send anything. Now, if I remove the Event.preventDefault(), the same message appears, only quickly (without the delay) and send the form with all data.

I wonder where the problem is?

Answer 1

When you use event.preventDefault(); form does not send. That is, ajax runs only by calling the url url: $(this).attr('action'), data-free...

What you should do is send the form data with ajax.

And then you have to put the text Obrigado por entrar em contato! somewhere, because I don’t see where form_status be added to the DOM.

Example:

var form = $('#main-contact-form');
form.submit(function (event) {
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $(this).prepend(form_status);
    $.ajax({
        url: $(this).attr('action'),
        data : $(this).serialize(),
        beforeSend: function () {
            form_status.html('<p>Enviando Email...</p>').fadeIn();
        }
    }).done(function (data) {
        form_status.html('<p class="text-success">Obrigado por entrar em contato!</p>').delay(3000).fadeOut();
    });
});

Answer 2

Using event.preventDefault() you cancel your Ubmit and go straight to .done(), your message appears and disappears because your action is trying to redirect you to your page, try to put a return false in your Ubmit to avoid redirecting, thus:

var form = $('#main-contact-form');
form.submit(function (event) {
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $(this).prepend(form_status);
    $.ajax({
        url: $(this).attr('action'),
        data : $(this).serialize(),
        beforeSend: function () {
            form_status.html('<p>Enviando Email...</p>').fadeIn();
        }

    }).done(function (data) {
        form_status.html('<p class="text-success">Obrigado por entrar em contato!</p>').delay(3000).fadeOut();
    });
    return false;
});