Reloading the page (send form) - php

Question

I have a problem with reloading the page. After clicking submit form the page reloads. I click send the form and takes me to http: // localhost: 3000 / mail.php. And I would like the site not to be reloaded. (I use the validation form jquery plugin).This is my code:
jquery
(function(){
$("#contactForm").on('submit', function(e) {
e.preventDefault();
var data = {
name = $('#field-name').val(),
phone = $('#field-phone').val(),
email = $('#field-email').val(),
message = $('#field-message').val()
};
$.ajax({
type: "POST",
url: "mail.php",
data: data,
success: function(){
console.log("jej");
}
});
return false;
});
});
and php code
<?php
$to = 'name#gmail.com';
$name = $_POST['name'];
$phone = $_POST['phone'];
$email= $_POST['email'];
$text = $_POST['message'];
$subject = 'Nowy e-mail od ' . $name . ' (' . $email . ')';
$message = $name . $phone . $email . $text;
$headers = 'From: ' . $name . "\r\n" .
if(mail($to, $subject, $message, $headers)) {
print "<p class='success'>Mail Sent.</p>";
} else {
print "<p class='Error'>Problem in Sending Mail.</p>";
}
?>

Answer 1

change part of your code
$("#contactForm").on('submit', function(e)
to this...
$("#contactFormButton").on('click', function(e)
and change your submit button to this...
<button id="contactFormButton" type="button" class="form-control">Submit</button>
and here your php code...
if(mail($to, $subject, $message, $headers)) {
echo "Mail Sent!";
} else {
echo "Error!!";
}
and here you can catch result of your php code...
success: function(data){
console.log(data);
}