Bootstrap Validator Form message to load on the same page - php

Question

I've been looking to solve this, but i can't find a way to do it. I already tried other methods i found in here, but none of them were working for me.
I'm building a website with Bootstrap and also using Bootstrap Validator to make a Contact Form. I can make it work perfect and also submit the contact, but the "thank you message" is redirected to another page. I want the "Thank you message" to load on the same page, and take the place of the form, since its a one scrolling page website.
Can anyone help me please? This is the code i have so far:
Ps.: All my CSS file are the original from bootstrap, nothing has been changed.
HTML
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Formulário de contato.</h2>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="contact-2.php">
<div class="form-group">
<label class="col-lg-3 control-label">Nome completo</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="Nome" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Sobrenome" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Assunto</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="subject" placeholder="WebSite" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-mail</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" placeholder="email#contato.com" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Telefone</label>
<div class="col-lg-5">
<input type="tel" class="form-control" name="tel" placeholder="48 0000 0000" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mensagem</label>
<div class="col-lg-5">
<textarea class="form-control" name="message" rows="10" placeholder="Escreva aqui sua mensagem."></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" id="captchaOperation"></label>
<div class="col-lg-2">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Enviar</button>
<button type="button" class="btn btn-info" id="resetBtn">Limpar</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
PHP Contact
<?php
// getting
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = trim($_POST['email']);
$emailtosend = 'myemail#hotmail.com'; //E-mail to receive message
$tel = $_POST['tel'];
$subject = $_POST['subject'];
$message = $_POST['message'];
/* Message to show on email. */
$mensagemHTML = '<P>Contact form sent by the website.</P>
<p><b>First Name:</b> '.$firstname.'
<p><b>Last Name:</b> '.$lastname.'
<p><b>E-Mail:</b> '.$email.'
<p><b>Telephone:</b> '.$tel.'
<p><b>Subject:</b> '.$subject.'
<p><b>Message:</b> '.$message.'</p>
<hr>';
//
//
$headers = "MIME-Version: 1.1\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: $email\r\n"; // remetente
$headers .= "Return-Path: $emailtosend \r\n"; // return-path
$envio = mail($email, $subject, $mensagemHTML, $headers);
if($envio)
//echo "<script>location.href='sucesso.html'</script>"; // Página que será redirecionada
?>
If there is anyone here able to help me with it, that would be great!

Answer 1

Have a look at the code below. You need AJAX. Place this in your html page.
The whole project of that code can be found at this link (just in case you want to see other files too).
$(function() {
$("#myform button").click(function() {
// Get form values
var name = $("input#name").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
// Validate and prepare values for php
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;
// Post data to the php file
$.ajax({
type: "POST",
url: "bin/process-form.php",
async:false, // Wait for the result
data: dataString,
success: function(data) {
if (data=="Email Sent Successfully!"){
$('#myform').html("<div id='message'></div>");
$('#message').html("<h2>Enquiry Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<span class='glyphicon glyphicon-ok'></span>");
});
} else {
$("#myform-errors").show();
$('#myform-errors').html(data);
}
}
});
return false;
});