AJAX Contact form doesn't work correctly

Question

I have a form:

<form id="main-contact-form" name="contact-form" action="sendemail.php" method="post">
    <div class="form-group">
        <input type="text" name="name" class="form-control" required="required" placeholder="Name">
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control" required="required" placeholder="Email">
    </div>
    <div class="form-group">
        <textarea name="message" id="message" required="required" class="form-control" rows="8" placeholder="Message"></textarea>
    </div>                        
    <div class="form-group">
        <input type="submit" name="submit" class="btn btn-submit" value="Send">
    </div>
</form>

sendememail.php is:

<?php

$name = htmlspecialchars($_POST["name"]);
$email = htmlspecialchars($_POST["email"]);

$to = "email@email.com";
$sub = "New message from site";

$message = "New message\n
Name: $name 
Email: $email";

$from  = "From: $name <$name> \r\n";

mail($to, $sub, $message, $from);
return;

?>

javascript is:

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> Sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thanks for you message!</p>').delay(3000).fadeOut();
    });
});

The problem: it sends a message to email, but without input fields. Their value are empty. I tried to do that without JS, and it's sending every field correctly.

Answer 1

You can use another type of form submit using jQuery ajax

<script>
    $('#main-contact-form').submit(function(event){
    event.preventDefault();
    $.ajax({
        type:'post',
        url:'sendememail.php',
        data:$(this).serialize(),
        success:function(response){ 
            if(response==1)
            {   

                setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-success">Review Successfully Submitted......</div></center></h5>');},5);

            }
            else 
            {

                setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-danger">Sorry Your Review Was Not Submitted......</div></center></h5>');},5);

            }
        }

    });
});
</script>

Answer 2

Improved ajax request:

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> Sending...</p>').fadeIn() );
        },
        // by default method is `GET`, set `POST` explicitly
        method: "POST",
        // provide data that you need in a `data` property
        // there can be many ways to collect your data
        // `serialize` is the simplest method for this case
        data: form.serialize()
    }).done(function(data){
        form_status.html('<p class="text-success">Thanks for you message!</p>').delay(3000).fadeOut();
    });
});

Answer 3

Specify the method and data you want to send through ajax as here is POST method:

$.ajax({
        url: $(this).attr('action'),
        method: "POST",
        data: $(this).serialize();
    });