我正在使用jquery来验证表单,然后使用php发送包含所有表单内容的电子邮件。
HTML - contact.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="message_validator.js" charset="utf-8"></script>
</head>
<body>
<form id="form_contacto" charset="utf-8">
<input type="text" id="name" class="textbox" name="name" maxlength="12" />
<input type="text" id="last_name" class="textbox" name="last_name" maxlength="12" />
<input type="text" id="email" class="textbox" name="email" maxlength="40" />
<input type="text" id="title" class="textbox_2" name="title" maxlength="40" />
<textarea id="message" name="message" ></textarea>
<input type="text" id="about" class="textbox_3" name="about" maxlength="40" />
<input type="text" id="validation" class="textbox_4" name="validation" maxlength="40" />
<input type="submit" class="submit" value="Send">
</form>
</body>
</html>
JQUERY - message_validator.js
// JavaScript Document
$(document).ready(function() {
$('.submit').click(function(){
if($('.error_display').css("height")!="0"){
$('.error_display').empty();
}
var errorlist = [];
errorlist.length = 0;
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var name = $('input#name').val();
var email = $('input#email').val();
var message = $('textarea#message').val();
var validation = $('input#validation').val();
if(name == '' && email == '' && message == ''){
errorlist.push("- ERROR ALL");
}else{
if (name == '') {
errorlist.push("-ERROR");
}else if(name.length <= 2){
errorlist.push("-ERROR");
}
if (email == ''){
errorlist.push("-ERROR");
}else if(!email_check.test(email)){
errorlist.push("-ERROR");
}
if (message == '') {
errorlist.push("-ERROR");
}else if(message.length <= 5){
errorlist.push("-ERROR");
}
if (validation == '') {
errorlist.push("-ERROR");
}else if(validation != 8){
errorlist.push("-ERROR");
}
}
if(errorlist.length >= 1){
$('.error_display').animate({'height':errorlist.length*22}, {queue:false, duration:500});
for(var i = 0; i < errorlist.length; i++) {
$('.error_display').append(errorlist[i]+"<br/>");
//errorlist[i].text.appendTo($('.error_display'));
//$('.error_display').append(errorlist[i].val());
}
}else{
$("form#form_contacto").submit();
$('.error_display').animate({'height':0}, {queue:false, duration:500});
$('.success_display').animate({'height':75}, {queue:false, duration:500});
$('#form_contacto').animate({'opacity':0.25}, {queue:false, duration:500});
$('.submit').attr("disabled", true);
}
});
});
PHP - message_handler.php
<?php
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$visitor_email = $_POST['email'];
$title = $_POST['title'];
$message = $_POST['message'];
$about = $_POST['about'];
$validation = $_POST['validation'];
$email_from = 'example@example.com';
$email_subject = "New Message";
$email_body = "Received a new message from $name $last_name"."Visitor email: $visitor_email\n\n\n"."Title: $title\n"."Message sent:\n $message\n\n";
$to = "example@example.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
?>
如果我将按钮更改为提交并在表单标记中放置method =“post”action =“message_handler.php”,则会正常发送消息。但是,当我使用该方法时,它会转到页面message_handler.php并显示一个空白页面,我希望它只发送,如果验证从message_validator.js实现,那就是为什么我试图使用jquery来使用帖子()方法。
我已经在最后的其他方面尝试了以下内容:
else{
$("form#form_contacto").submit();
}
和
else{
$.post("message_handler.php", {name:name, email:email, last_name:last_name, title:title, message:message}
}
答案 0 :(得分:2)
message_handler.php
警告:您应该保护此页面免受垃圾邮件的侵害。在目前的状态下,你非常脆弱
将您对邮件功能的调用更改为此
if(mail($to,$email_subject,$email_body,$headers)) {
echo "success";
}
else {
echo "fail";
}
<强> message_validator.js 强>
将此添加到您的else块
$.post(
"message_handler.php",
{
name:name,
email:email,
last_name:last_name,
title:title,
message:message
},
function(result){
// log to console for debug
console.log(result);
if(result == 'success') {
// do something here
}
else {
// do something on failure
}
});
<强> contact.php 强>
将提交的按钮类型更改为prevent form submission
<input type="button" class="submit" value="Send">