Ajax not refreshing contact form - php

Question

I'm working on a site and the goal was to submit a contact form without reloading the whole page. I tried different paths, but nothing seems to help. It looks like the "on submit" part doesn't work at all I'm still leaving site to contact_form.php. I would be very thankful for any help, thanks in advance
This is js part:
$("#contact-form").on('submit', function(){
var name = $("#form_name").val();
var lastname = $("#form_lastname").val();
var email = $("#form_email").val();
var subject = $("#form_subject").val();
var message = $("#form_message").val();
var dataString = 'name=' + name + '&lastname=' + lastname + '&email=' + email +'&subject'+subject + '&message=' + message;
$.ajax({
type: "POST",
url: "contact_form.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
return false;
});
and here html:
<form id="contact-form" method="post" action="contact_form.php" role="form">
<div class="messages"></div>
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<input id="form_name" type="text" name="name" class="form-control" placeholder="Name" required="required" data-invalid-message="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class ="form-row">
<div class="col-md-12">
<div class="form-group">
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Last name" required="required" data-invalid-message="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<input id="form_email" type="text" name="mail" class="form-control" placeholder="Email" required="required" data-invalid-message="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject" required="required" data-invalid-message="Please enter your name">
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<textarea id="form_message" name="message" class="form-control" placeholder="Message" rows="4" required="required" data-invalid-message="Please enter your name"></textarea>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success" value="Send message">
</div>
</div>
</form>

Answer 1

You can start by passing the event and stopping the default behaviour, which would be to hit the action of the form.
$("#contact-form").on('submit', function(e){
e.preventDefault();
// rest of code... ( do not return true in the end of this handler though )