Ajax form won't display success message - php

Question

I'm having an issue with an contact form everything works except it will not show the success message after the form is added to the db.
The process script
$post = (!empty($_POST)) ? true : false;
if($post)
{
include 'db.php';
include 'functions.php';
$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$phone = stripslashes($_POST['phone']);
$device = stripslashes($_POST['device']);
$model = stripslashes($_POST['model']);
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);
$error = '';
// Check name
if(!$name)
{
$error .= 'Please enter your name.<br />';
}
// Check email
if(!$email)
{
$error .= 'Please enter an e-mail address.<br />';
}
if($email && !ValidateEmail($email))
{
$error .= 'Please enter a valid e-mail address.<br />';
}
// Check phone number
if(!$phone)
{
$error .= 'Please enter your phone number.<br />';
}
// Check device
if(!$device)
{
$error .= 'Please enter your device manufacturer.<br />';
}
// Check device model
if(!$model)
{
$error .= 'Please enter your device model.<br />';
}
// Check message (length)
if(!$message || strlen($message) < 15)
{
$error .= "Please enter your message. It should have at least 15 characters.<br />";
}
// Get current time stampe
$date = time();
if(!$error)
{
$addDB = "INSERT INTO contactus (`name`,`email`,`phone`,`device`,`model`,`subject`,`message`, `date`, `read`) VALUES ('$name','$email','$phone','$device','$model','$subject','$message','$date', '')";
$result = mysqli_query($con,$addDB) or trigger_error("Query Failed! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR);
echo 'OK';
} else {
echo '<div class="notification_error">'.$error.'</div>';
}
}
And here is the jQuery part
<script type="text/javascript">
$(document).ready(function ()
{ // after loading the DOM
$("#ajax-contacts").submit(function ()
{
// this points to our form
var str = $(this).serialize(); // Serialize the data for the POST-request
$.ajax(
{
type: "POST",
url: 'includes/contact-process.php',
data: str,
success: function (msg)
{
$("#note").ajaxComplete(function (event, request, settings)
{
if (msg == 'OK')
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
return false;
});
});
</script>
Thanks any help is gladly appreciated.

Answer 1

Drop this line:
$("#note").ajaxComplete(function (event, request, settings)
You don't need it as you are already in the success: function.
For debugging purpose you can try to put in an alert("Test"); just above that troublesome line to check if it is displayed.
Note that the success callbacks have been deprecated and you should instead use .done. See the jQuery API for more info:
You could also try and do some debugging yourself. E.g. Chrome has some really good developer tools where you can see a lot of stuff and you can even setup breakpoints and walk through your code step-by-step. Very useful.
Hit F12 to show Developer Tools.
Go in to Settings:
Enable logging of XHR/Ajax requests:
When doing Ajax requests hereafter it will be logged in the console:
Just rightclick on that Ajax request to trigger a new identical request. In this way you can see exactly what the browser sends and what your PHP script receives. Of course the request needs to be GET for you to debug the variables being passed.