ajax新手。。。通过php从模式窗口发送电子邮件时出现问题
我没有使用过很多AJAX，我有点沮丧。 在我的小页面上，当用户按下按钮时，会打开一个模式表单，并提示输入电子邮件、名字、姓氏和电话号码。我试图使用ajax将此信息传递到一个“sendmessage.php”文件，但有些东西不起作用 HTML:ajax新手。。。通过php从模式窗口发送电子邮件时出现问题,php,jquery,ajax,Php,Jquery,Ajax,我没有使用过很多AJAX，我有点沮丧。 在我的小页面上，当用户按下按钮时，会打开一个模式表单，并提示输入电子邮件、名字、姓氏和电话号码。我试图使用ajax将此信息传递到一个“sendmessage.php”文件，但有些东西不起作用 HTML: <!--hidden inline form--> <div id="inlineForm"> <h3>Estimate Request</h3> <for
<!--hidden inline form-->
<div id="inlineForm">
<h3>Estimate Request</h3>
<form id="estimateForm" action="#" method="post" name="estimateForm">
<label for="formFirstName">First Name:</label>
<input id="formFirstName" type="text" name="formFirstName"><br />
<label for="formLastName">Last Name:</label>
<input id="formLastName" type="text" name="formLastName"><br />
<label for="formPhone">Phone:</label>
<input id="formPhone" type="text" name="formPhone" placeholder="(###)###-####"><br />
<label for="formEmail">Email:</label>
<input id="formEmail" type="email" name="formEmail" placeholder="example@example.com"><br />
<button id="formSendButton">Send</button>
</form>
</div><!--end of inlineForm div-->
$("#formSendButton").on("click", function(){
var emailVal = $("#formEmail").val();
var firstNameVal = $("#formFirstName").val();
var lastNameVal = $("#formLastName").val();
var phoneVal = $("#formPhone").val();
var validEmail = validateEmail(emailVal);
var validPhone = validatePhone(phoneVal);
var data = $("#estimateForm").serialize();
/////// A bunch of checks to ensure proper values //////
if(validEmail == true && lastNameVal.length >= 3 && firstNameVal.length >= 3 && validPhone == true){
$("#estimateForm").css("padding-bottom","23px");
$("#formSendButton").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: data,
success: function(data) {
if(data == "true") {
$("#estimateForm").fadeOut("fast", function(){
$(this).before("<strong>Success!</strong>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
})
<?php
$sendto = "trevorjames39@gmail.com";
$usermail = $_POST['formEmail'];
$firstName = $_POST['formFirstName'];
$lastName = $_POST['formLastName'];
$phone = $_POST['formPhone'];
$subject = "Request for Quote";
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Request for Quote</h2>\r\n";
$msg .= "<p><strong>Customer First Name:</strong>-----".$firstName."</p>\r\n";
$msg .= "<p><strong>Customer Last Name:</strong>------".$lastName."</p>\r\n";
$msg .= "<p><strong>Customer Phone Number:</strong>---".$phone."</p>\r\n";
$msg .= "<p><strong>Customer Email address:</strong>--".$usermail."</p>\r\n";
$msg .= "</body></html>";
if(mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?>
估算请求
名字：
姓氏：
电话：
电邮：
发送
<!--hidden inline form-->
<div id="inlineForm">
<h3>Estimate Request</h3>
<form id="estimateForm" action="#" method="post" name="estimateForm">
<label for="formFirstName">First Name:</label>
<input id="formFirstName" type="text" name="formFirstName"><br />
<label for="formLastName">Last Name:</label>
<input id="formLastName" type="text" name="formLastName"><br />
<label for="formPhone">Phone:</label>
<input id="formPhone" type="text" name="formPhone" placeholder="(###)###-####"><br />
<label for="formEmail">Email:</label>
<input id="formEmail" type="email" name="formEmail" placeholder="example@example.com"><br />
<button id="formSendButton">Send</button>
</form>
</div><!--end of inlineForm div-->
$("#formSendButton").on("click", function(){
var emailVal = $("#formEmail").val();
var firstNameVal = $("#formFirstName").val();
var lastNameVal = $("#formLastName").val();
var phoneVal = $("#formPhone").val();
var validEmail = validateEmail(emailVal);
var validPhone = validatePhone(phoneVal);
var data = $("#estimateForm").serialize();
/////// A bunch of checks to ensure proper values //////
if(validEmail == true && lastNameVal.length >= 3 && firstNameVal.length >= 3 && validPhone == true){
$("#estimateForm").css("padding-bottom","23px");
$("#formSendButton").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: data,
success: function(data) {
if(data == "true") {
$("#estimateForm").fadeOut("fast", function(){
$(this).before("<strong>Success!</strong>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
})
<?php
$sendto = "trevorjames39@gmail.com";
$usermail = $_POST['formEmail'];
$firstName = $_POST['formFirstName'];
$lastName = $_POST['formLastName'];
$phone = $_POST['formPhone'];
$subject = "Request for Quote";
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Request for Quote</h2>\r\n";
$msg .= "<p><strong>Customer First Name:</strong>-----".$firstName."</p>\r\n";
$msg .= "<p><strong>Customer Last Name:</strong>------".$lastName."</p>\r\n";
$msg .= "<p><strong>Customer Phone Number:</strong>---".$phone."</p>\r\n";
$msg .= "<p><strong>Customer Email address:</strong>--".$usermail."</p>\r\n";
$msg .= "</body></html>";
if(mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?>
$（“#formSendButton”）。在（“单击”，函数（）{
var emailVal=$（“#formEmail”）.val（）；
var firstNameVal=$（“#formFirstName”）.val（）；
var lastNameVal=$（“#formLastName”）.val（）；
var phoneVal=$（“#formPhone”）.val（）；
var validEmail=validateEmail（emailVal）；
var validPhone=validatePhone（phoneVal）；
var data=$（“#估计形式”）.serialize（）；
///////一系列检查以确保正确的值//////
如果（validEmail==true&&lastNameVal.length>=3&&firstNameVal.length>=3&&validPhone==true）{
$（“#estimateForm”）.css（“填充底部”、“23px”）；
$（“#formSendButton”）。替换为（“发送…”）；
$.ajax({
键入：“POST”，
url:'sendmessage.php'，
数据：数据，
成功：功能（数据）{
如果（数据==“真”）{
$（“#估计形式”）.fadeOut（“快速”，函数（）{
$（此）。在（“成功！”）之前；
setTimeout（$.fancybox.close（）”，1000）；
});
}
}
});
}
})
<!--hidden inline form-->
<div id="inlineForm">
<h3>Estimate Request</h3>
<form id="estimateForm" action="#" method="post" name="estimateForm">
<label for="formFirstName">First Name:</label>
<input id="formFirstName" type="text" name="formFirstName"><br />
<label for="formLastName">Last Name:</label>
<input id="formLastName" type="text" name="formLastName"><br />
<label for="formPhone">Phone:</label>
<input id="formPhone" type="text" name="formPhone" placeholder="(###)###-####"><br />
<label for="formEmail">Email:</label>
<input id="formEmail" type="email" name="formEmail" placeholder="example@example.com"><br />
<button id="formSendButton">Send</button>
</form>
</div><!--end of inlineForm div-->
$("#formSendButton").on("click", function(){
var emailVal = $("#formEmail").val();
var firstNameVal = $("#formFirstName").val();
var lastNameVal = $("#formLastName").val();
var phoneVal = $("#formPhone").val();
var validEmail = validateEmail(emailVal);
var validPhone = validatePhone(phoneVal);
var data = $("#estimateForm").serialize();
/////// A bunch of checks to ensure proper values //////
if(validEmail == true && lastNameVal.length >= 3 && firstNameVal.length >= 3 && validPhone == true){
$("#estimateForm").css("padding-bottom","23px");
$("#formSendButton").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: data,
success: function(data) {
if(data == "true") {
$("#estimateForm").fadeOut("fast", function(){
$(this).before("<strong>Success!</strong>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
})
<?php
$sendto = "trevorjames39@gmail.com";
$usermail = $_POST['formEmail'];
$firstName = $_POST['formFirstName'];
$lastName = $_POST['formLastName'];
$phone = $_POST['formPhone'];
$subject = "Request for Quote";
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Request for Quote</h2>\r\n";
$msg .= "<p><strong>Customer First Name:</strong>-----".$firstName."</p>\r\n";
$msg .= "<p><strong>Customer Last Name:</strong>------".$lastName."</p>\r\n";
$msg .= "<p><strong>Customer Phone Number:</strong>---".$phone."</p>\r\n";
$msg .= "<p><strong>Customer Email address:</strong>--".$usermail."</p>\r\n";
$msg .= "</body></html>";
if(mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?>
您的默认表单操作实际上正在启动。我认为您需要通过以下操作禁用该功能：
onsubmit="return false;"
或者，您可以命名（当前为匿名onclick）函数，并使表单动作
action="javascript:yourFunction()"
另外：我假设validateEmail和validatePhone是在代码中的某个地方定义的。您的默认表单操作实际上正在启动。我认为您需要通过以下操作禁用该功能：
onsubmit="return false;"
或者，您可以命名（当前为匿名onclick）函数，并使表单动作
action="javascript:yourFunction()"
另外：我假设validateEmail和validatePhone是在代码中的某个地方定义的。您可能需要详细说明一下。你说的“有些东西不起作用”是什么意思？它是否将请求发送到服务器？如果你是JS编程新手，你应该尝试熟悉Firebug或Webkit开发工具。我尝试使用firebug，但不确定从哪里开始。我知道序列化正在工作，因为我可以在警报中得到它…例如，在它实际发送请求的位置设置断点。这将是第一件要检查的事情，它是否发送了它，或者代码中的其他内容是否阻止了它。我确实这样做了。。。但我必须诚实地说，我不知道如何检查……你可能需要详细说明一下。你说的“有些东西不起作用”是什么意思？它是否将请求发送到服务器？如果你是JS编程新手，你应该尝试熟悉Firebug或Webkit开发工具。我尝试使用firebug，但不确定从哪里开始。我知道序列化正在工作，因为我可以在警报中得到它…例如，在它实际发送请求的位置设置断点。这将是第一件要检查的事情，它是否发送了它，或者代码中的其他内容是否阻止了它。我确实这样做了。。。但我必须诚实，我不知道如何检查。。。