Submitting a form without reloading the page - php

Question

I have a form which works fine but after submitting it reloads the page. I want it to display the message under the form instead of reloading the page.
Here is my html code:
<form class=" form-horizontal" action="php/contact.php" method="post" id="contact_form" name="contact-form">
<fieldset>
<div class="form-group">
<input name="firstname" placeholder="First Name" class="form-control" type="text">
<input name="lastname" placeholder="Last Name" id="lastname" class="form-control" type="text">
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
<input type="text" name="mail"> <!-- anti spam - needs to stay non-filled - hidden by css -->
<input name="phone" placeholder="([phone]" class="form-control" type="text">
<input name="company" placeholder="Company name" class="form-control" type="text">
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
<textarea class="form-control" name="message" placeholder="Your message"></textarea>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">
Thanks for contacting us, we will get back to you shortly.</div>
<button type="submit" class="btn btn-block btn-primary">Send <span class="fa fa-fw fa-lg fa-send"></span> </button>
</div>
</fieldset>
</form>
I also use jquery validation scripts and this is a quick summary to this script ( I believe the most of changes need to be done here):
$(function() {
$("form[name='contact-form']").validate({
rules: {
firstname: "required",
message: "required",
email: {
required: true,
email: true
},
},
messages: {
firstname: " Please enter your firstname",
email: " Please enter a valid email address",
message: " Please type your message"
},
submitHandler: function(form) {
form.submit();
}
});
});
And this is a php code, which reloads the page after submitting:
<?php
$adresdo = "info#tucado.com";
$temat = "Message from tucado.com";
$zawartosc = "First Name: ".$_POST['firstname']."\n"
."Last Name: ".$_POST['lastname']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Telephone: ".$_POST['phone']."\n"
."Website: ".$_POST['website']."\n"
."Message: ".$_POST['message']."\n";
if(!$_POST['firstname'] || !$_POST['email'] || !$_POST['message']){
header("Location: ../contact.html");
exit;
}
$email = $_POST['email'];
if(mail($adresdo, $temat, $zawartosc, 'From: Contact <'.$email.'>')){
header("Location: ../msg-sent.html");
}
?>
Could you please help me in modifying this code to display a message (id="success_message") when the message is sent? Thank you for your help.

Answer 1

Try ajax submission. put ajax code inside submit handler, use serialise or formdata to fetch the whole form .See example.
submitHandler: function(form) {
$.ajax({
url: "name_of_file.php",
type: "POST",
data: new FormData($(form)),
cache: false,
success: function(data) {
$("#success_message").html(data);
}
});
return false;
},
echo desired output in the php file so as to retreive it in data.