php/ajax - {"success":{"title":"Message Sent"}} - php

Question

I've never used ajax before but from what I can tell that's the solution to my problem, basically I'm using a PHPmailer form on indk.org/contact.html and when you hit submit it displays a new window (taking you away from the website nav) with {"success":{"title":"Message Sent"}} shown
How do I stop this happening, or at the very least, have a message sent confirmation appear on the webpage itself, want to avoid taking people off site as much as I can as it's a personal portfolio.
Welcome any aid! Thanks :) D
<?php
require '../_lib/phpmailer/PHPMailerAutoload.php';
// CONFIG YOUR FIELDS
//============================================================
$name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$formMessage = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
// CONFIG YOUR EMAIL MESSAGE
//============================================================
$message = '<p>The following request was sent from: </p>';
$message .= '<p>Name: ' . $name . '</p>';
$message .= '<p>Email: ' . $email . '</p>';
$message .= '<p>Message: ' . $formMessage .'</p>';
// CONFIG YOUR MAIL SERVER
//============================================================
$mail = new PHPMailer;
$mail->isSMTP(); // Enable SMTP authentication
$mail->SMTPAuth = true; // Set mailer to use SMTP
$mail->Host = 'mailout.one.com'; // Specify main and backup server (this is a fake name for the use of this example)
$mail->Username = 'dk#indk.org'; // SMTP username
$mail->Password = 'XXX'; // SMTP password
$mail->SMTPSecure = 'SSL'; // Enable encryption, 'ssl' also accepted
$mail->Port = 587;
$mail->From = 'dk#indk.org';
$mail->FromName = $name;
$mail->AddReplyTo($email,$name);
$mail->addAddress('dk#indk.org', $name); // Add a recipient
$mail->WordWrap = 50; // Set word wrap to 50 characters
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Contact request';
$mail->Body = $message;
$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';
if(!$mail->send()) {
$data['error']['title'] = 'Message could not be sent.';
$data['error']['details'] = 'Mailer Error: ' . $mail->ErrorInfo;
exit;
}
$data['success']['title'] = 'Message Sent, click back to return to indk.org';
echo json_encode($data);
?>
$(document).ready(function() {
'use strict';
$('#contact-form').validate({
// Override to submit the form via ajax
submitHandler: function(form) {
$('#contact-panel').portlet({
refresh:true
});
$.ajax({
type:$(form).attr('method'),
url: $(form).attr('action'),
data: $(form).serialize(),
dataType: 'json',
success: function(data){
console.log(data);
//Set your Success Message
clearForm("Thank you for Contacting Us! We will be in touch");
},
error: function(err){
$('#contact-panel').portlet({
refresh:false,
//Set your ERROR Message
error:"We could not send your message, Please try Again"
});
}
});
return false; // required to block normal submit since you used ajax
}
});
function clearForm(msg){
$('#contact-panel').html('<div class="alert alert-success" role="alert">'+msg+'</div>');
}
$('#contact-panel').portlet({
onRefresh: function() {
}
});
});

Answer 1

You can do it either way. You can use a simple bootstrap pop-up to show the confirmation or as you said you can use AJAX.