我有一个有效的联系表单,但决定尝试学习一点 Ajax 来提高可用性和错误检查。我正在使用这个示例中的代码,我已经稍微调整以适应新的 .ajaxComplete() 准则。
我不知道为什么这不起作用,但我会提供我的表单、ajax 请求和工作示例,希望有人能提供帮助:
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(请注意,我已在此处删除所有验证以使其更易于理解)
$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.com";
$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>