1

我没有使用很多 AJAX，并且有点沮丧。在我的小页面上，当用户按下按钮时，会打开一个模式表单，并提示输入电子邮件、名字、姓氏和电话号码。我正在尝试使用 ajax 将此信息传递给“sendmessage.php”文件，但有些东西不起作用。

HTML：

<!--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-->

Javascript/AJAX：

     $("#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：

<?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";
}

?>

我对php有功能性的了解，但是ajax ....

此外，这主要是从我在这里找到的教程中挑选出来的

感谢任何花时间看这个的人。

4

1 回答 1

1

您的默认表单操作实际上正在启动。我认为您需要通过执行以下操作来禁用它：

 onsubmit="return false;"

或者，您可以命名您的（当前匿名 onclick）函数并进行表单操作

action="javascript:yourFunction()"

另外：我假设 validateEmail 和 validatePhone 是在您的代码中定义的。

于 2012-11-12T22:20:52.287 回答