Contact form with AJAX ( without pageload ) - php

Question

I am new with AJAX, I have to make a modal contact form that pops up. I have everything the html the css the validation etc. Only the AJAX not, I don't know where to start, please can you help me out. I just want to preventDefault it and without pageload sending the e-mail.
This is the Javascript ( i think only the id is needed I wont post the whole code )
form id = #contact-form
The HTML
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="color:#31708f" class="modal-title" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<div class="col-lg-6">
<form role="form" name"contact-form" id="contact-form" method="post" action="contactengine.php">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" id="name" type="text" name="name" />
</div>
<div class="form-group">
<label for="e-mail">E-mail adres</label>
<input class="form-control" id="email" type="email" name="email" />
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input class="form-control" id="subject" type="text" name="subject" />
</div>
<div class="form-group">
<label for="bericht">Message</label>
<textarea class="form-control" id="message" name="message" placeholder="" cols="30" rows="5"></textarea>
</div>
<div class="form-group">
<input class="btn btn-info" id="submit" type="submit" value="Send" />
</div>
</form>
</div>

Answer 1

First, this is not JavaScript: form id = #contact-form.
Basically what you want to do is first making it work without AJAX and JavaScript. You need to have the PHP stuff working on the server.
Then, you use some JavaScript to prevent the Form from being sent (this is with jQuery):
$('#contact-form').on('submit', function(e) {
e.preventDefault();
//Here you send the ajax-request to the php-script.
$.ajax('send.php', {
data: $(this).serialize(),
type: 'POST',
success: function(data) {
alert(data); //for testing
}
});
});
See for example the jQuery documentation about ajax for further information about how to send the request.