I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this example which I've adapted slightly to acmodate the new .ajaxComplete() guidelines.
I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:
My website
JS
$(document).ready(function() {
$("#get-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact-process.php",
data: str,
success: function(msg) {
$(document).ajaxComplete(function(event, request, settings) {
if (msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent Succesfully. Thank you!!!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$("#note").hide();
$("#note").html(result).slideDown("slow");
$("#note").html(result);
});
}
});
return false;
});
});
PHP (Please note I've removed all validation here to make it easier to follow)
$title = $_POST["Form"]["title"];
$forename = trim($_POST["Form"]["forename"]);
$surname = trim($_POST["Form"]["surname"]);
$telephone = trim($_POST["Form"]["telephone"]);
$email = trim($_POST["Form"]["email"]);
$message = trim($_POST["Form"]["message"]);
$name = $title . " " . $forename . " " . $surname;
require_once("inc/PHPMailer/class.phpmailer.php");
$mail = new PHPMailer();
$email_body = "";
$email_body = $email_body . "<h1 class='heading'><strong>Name:</strong></h1><br />" . $name . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Telephone Number:</strong></h1><br />" . $telephone . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Email:</strong></h1><br />" . $email . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Message:</strong></h1><br />" . $message;
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail";
$mail->Port = 465;
$mail->Username = "****";
$mail->Password = "****";
$mail->SetFrom($email, $name);
$address = "*******";
$mail->AddAddress($address, "*****");
$mail->Subject = "Email Subject | " . $name;
$mail->MsgHTML($email_body);
HTML
<form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" >
<div id="note"></div>
<div id="fields">
<div class="row grid-full">
<label for="title">Title</label>
<select name="Form[title]" id="title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="grid-2">
<label for="forname">First Name</label>
<input type="text" name="Form[forename]" id="forename" />
<label for="surname">Last Name</label>
<input type="text" name="Form[surname]" id="surname" />
</div>
<div class="grid-2">
<label for="telephone">Telephone</label>
<input type="text" name="Form[telephone]" id="telephone" />
<label for="email">Email Address</label>
<input type="text" name="Form[email]" id="email" />
</div>
<div class="row grid-4" style="display: none;">
<label for="address">Address</label>
<input type="text" name="Form[address]" id="address" />
<p>Please leave this field blank.</p>
</div>
<div class="row grid-4">
<label for="message">Comments</label>
<textarea rows="12" name="Form[message]" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</div>
</form>
I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this example which I've adapted slightly to acmodate the new .ajaxComplete() guidelines.
I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:
My website
JS
$(document).ready(function() {
$("#get-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact-process.php",
data: str,
success: function(msg) {
$(document).ajaxComplete(function(event, request, settings) {
if (msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent Succesfully. Thank you!!!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$("#note").hide();
$("#note").html(result).slideDown("slow");
$("#note").html(result);
});
}
});
return false;
});
});
PHP (Please note I've removed all validation here to make it easier to follow)
$title = $_POST["Form"]["title"];
$forename = trim($_POST["Form"]["forename"]);
$surname = trim($_POST["Form"]["surname"]);
$telephone = trim($_POST["Form"]["telephone"]);
$email = trim($_POST["Form"]["email"]);
$message = trim($_POST["Form"]["message"]);
$name = $title . " " . $forename . " " . $surname;
require_once("inc/PHPMailer/class.phpmailer.php");
$mail = new PHPMailer();
$email_body = "";
$email_body = $email_body . "<h1 class='heading'><strong>Name:</strong></h1><br />" . $name . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Telephone Number:</strong></h1><br />" . $telephone . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Email:</strong></h1><br />" . $email . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Message:</strong></h1><br />" . $message;
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.";
$mail->Port = 465;
$mail->Username = "****";
$mail->Password = "****";
$mail->SetFrom($email, $name);
$address = "*******";
$mail->AddAddress($address, "*****");
$mail->Subject = "Email Subject | " . $name;
$mail->MsgHTML($email_body);
HTML
<form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" >
<div id="note"></div>
<div id="fields">
<div class="row grid-full">
<label for="title">Title</label>
<select name="Form[title]" id="title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="grid-2">
<label for="forname">First Name</label>
<input type="text" name="Form[forename]" id="forename" />
<label for="surname">Last Name</label>
<input type="text" name="Form[surname]" id="surname" />
</div>
<div class="grid-2">
<label for="telephone">Telephone</label>
<input type="text" name="Form[telephone]" id="telephone" />
<label for="email">Email Address</label>
<input type="text" name="Form[email]" id="email" />
</div>
<div class="row grid-4" style="display: none;">
<label for="address">Address</label>
<input type="text" name="Form[address]" id="address" />
<p>Please leave this field blank.</p>
</div>
<div class="row grid-4">
<label for="message">Comments</label>
<textarea rows="12" name="Form[message]" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</div>
</form>
- Where is your server side script???, I can see in the firebug that the ajax is working fine, your server side script is the problem – Emilio Gort Commented Oct 2, 2013 at 23:01
- Please see edit....I've removed all validation to make it easier to follow – Sam Holguin Commented Oct 2, 2013 at 23:05
- As far as I can see it's working just fine, but the server isn't returning any content, so logically you won't see anything appear in the message box. – Jon Koops Commented Oct 2, 2013 at 23:06
- 1 ment the email part in your php and do a print_r($_POST) to see how are receiving the data – Emilio Gort Commented Oct 2, 2013 at 23:07
-
1
Add this to the end of your php and remove the print_r,
if(!$mail->send()) { echo 'Message could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; exit; }, to see what is the error – Emilio Gort Commented Oct 2, 2013 at 23:13
1 Answer
Reset to default 1According to the documentation you are missing this lines in your php
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
exit;
}else{
echo 'ok';
}