PHP sendmail form is sending blank e-mail, how can I fix java script?

Question

I had problem all day about sendmail.php. First I had proble to not receive e-mail I fix it than I start to receive e-mail blank. I undestand the problem wasn't php code or html code, problem was java script wich is attached to 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><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});

this is the code which is sending blank e-mail. I read an answer similar problem and I understand that I should use this;

var form = $('.contact-form');
form.submit(function () {
    $this = $(this);
    $.post($(this).attr('action'),$(this).serialize(), function(data) {

When I changed recommended code to my code I start to receive e-mail with name topic and message but after clicking the "Send Now" botton page turn to white blank instead of giving message as "Thank you for contact us. As early as possible we will contact you"

So I think I couldn't combine to correct code to mine. Can anybody help me to add $.post($(this).attr('action'),$(this).serialize(), function(data) { to my scrpt? Thanks in advance

Answer 1

You can always use your code but with two changes, add a "method" to your ajax request, and some data to send to the server. Also make sure you're working with POST values in the php file

    var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        method: 'post',
        data: $(this).serialize(),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});