我正在将联系表单转换为AJAX,以便我可以执行成功功能。现在代码停止在submitHandler部分,说它是未定义的。我的submitHandler怎么没有定义?
submitHandler(function(form) {
我是否以正确的方式这样做?我想使用我当前的php,因为我将它构建为jQuery验证的后端验证。
有没有人看到submitHandler有什么问题以及可能阻止它发送的任何内容?
HTML
<div class="contact-container">
<form id="contactform" method="post" action="" novalidate>
<?php
if($sent === true) {
echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>";
} elseif($hasError === true) {
echo '<ul class="errorlist">';
foreach($errorArray as $key => $val) {
echo "<li>" . ucfirst($key) . " field error - $val</li>";
}
echo '</ul>';
}
?>
<div>
<input type="text" class="contact_input" name="name" id="name" value="<?php echo (isset($name) ? $name : ""); ?>" placeholder="Name">
</div>
<div>
<input type="email" class="contact_input" name="email" id="email" value="<?php echo (isset($email) ? $email : ""); ?>" placeholder="Email">
</div>
<div>
<textarea name="message" class="contact_input" id="message" placeholder="Message"><?php echo (isset($message) ? $message : ""); ?></textarea>
</div>
<input type="submit" id="submit_contact" class="clear" name="submitform" value="Send">
</form>
</div>
<div class="contact-email-success">
<div class="contact-email-success-container">
<div id="contact-email-success-title">THANK YOU FOR CONTACTING OUR AGENCY!</div>
<div id="contact-email-success-description">Your submission has been received and one of our team members will contact you shortly.</div>
</div>
</div>
的jQuery
//Send the project email
$(document).ready(function(){
$("#submit_contact").on("click", function (event) {
//event.preventDefault();
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 5
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Your name seems a bit short, doesn't it?"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short. Please enter at least 5 characters"
}
}
});
submitHandler(function(form) {
//Variables for the form ids
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
url: "email-contact.php",
type: "POST",
data: {
"project_name": name,
"title_roll": email,
"project_email": message
},
success: function (data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$(".contact-container").addClass("removeClass");
$(".contact-email-success").show();
$(".announcement_success").fadeIn();
$(".announcement_success").show();
// $('.announcement_success').html('Email Successfully sent!');
//$('.announcement_success').delay(5000).fadeOut(400);
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
});
});
});
PHP
$hasError = false;
$sent = false;
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if(isset($_POST['submitform'])) {
$name = trim(htmlspecialchars($_POST['name'], ENT_QUOTES));
$email = trim(htmlspecialchars($_POST['email']));
$message = trim(htmlspecialchars($_POST['message'], ENT_QUOTES));
$fieldsArray = array(
'name' => $name,
'email' => $email,
'message' => $message
);
$errorArray = array();
foreach($fieldsArray as $key => $val) {
switch ($key) {
case 'name':
case 'message':
if(empty($val)) {
$hasError = true;
$errorArray[$key] = ucfirst($key) . " field was left empty.";
}
break;
case 'email':
if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$hasError = true;
$errorArray[$key] = "Invalid Email Address entered";
} else {
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
}
break;
}
}
if($hasError !== true) {
$to = "gsdfa";
$subject = "Contact Form Submitted";
$msgcontents = "Name: $name<br>Email: $email<br>Message: $message";
$headers = "MIME-Version: 1.0 \r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
$headers .= "From: $name <$email> \r\n";
$emailsent = mail($to, $subject, $msgcontents,$headers);
if($mailsent) {
$sent = true;
unset($name);
unset($email);
unset($message);
}
}
}
答案 0 :(得分:1)
使用它:
JQuery的:
$(document).ready(function(){
$("#submit_contact").click(function(){
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
url: "email-contact.php",
type: "POST",
data: {
"project_name": name,
"title_roll": email,
"project_email": message
},
success: function (data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$(".contact-container").addClass("removeClass");
$(".contact-email-success").show();
$(".announcement_success").fadeIn();
$(".announcement_success").show();
// $('.announcement_success').html('Email Successfully sent!');
//$('.announcement_success').delay(5000).fadeOut(400);
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
});
});
在你的php文件中更改:
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
进入
$name = $_POST['project_name'];
$email = $_POST['title_roll'];
$message = $_POST['project_email'];
希望得到帮助
答案 1 :(得分:1)
您需要在submitHandler
函数调用中定义validate()
。但你只是想在外面执行它。这样做 -
$("#contactform").validate({
rules: {...},
messages: {...},
submitHandler: function(form) {
//Variables for the form ids
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
url: "email-contact.php",
type: "POST",
data: {
"project_name": name,
"title_roll": email,
"project_email": message
},
success: function (data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$(".contact-container").addClass("removeClass");
$(".contact-email-success").show();
$(".announcement_success").fadeIn();
$(".announcement_success").show();
// $('.announcement_success').html('Email Successfully sent!');
//$('.announcement_success').delay(5000).fadeOut(400);
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
}
});
请参阅submitHandler文档中的示例。