Ajax的新事物

我没有使用过很多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) . "rn";
$headers .= "Reply-To: ". strip_tags($usermail) . "rn";
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html;charset=utf-8 rn";
$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Request for Quote</h2>rn";
$msg .= "<p><strong>Customer First Name:</strong>-----".$firstName."</p>rn";
$msg .= "<p><strong>Customer Last Name:</strong>------".$lastName."</p>rn";
$msg .= "<p><strong>Customer Phone Number:</strong>---".$phone."</p>rn";
$msg .= "<p><strong>Customer Email address:</strong>--".$usermail."</p>rn";
$msg .= "</body></html>";

if(mail($sendto, $subject, $msg, $headers)) {
    echo "true";
} else {
    echo "false";
}
?>

我对PHP有功能理解，但是Ajax ....

另外，这主要是从我在这里找到的教程中掌握的

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

您的默认表单动作实际上正在启动。我认为您需要通过：

来禁用此操作

 onsubmit="return false;"

另外，您可以命名您的（当前匿名ONCLICK）功能，并使您的表单操作

action="javascript:yourFunction()"

另外：我假设代码中的某个地方定义了ValidateMail和Validate Phone。

相关内容

最新更新

热门标签：