在我使用Ajax和PHP構建的表單中，單擊“提交”按鈕后沒有任何反應

Question

我不確定自己在做什么錯，我已經與我們聯系並發送了電子郵件。 但是單擊“提交”后沒有任何反應。 我正在使用Materialize CSS for UI。

<div id="modal-contact" class="modal">
    <div class="modal-content">
        <h5 class="center">Get in touch</h5>
        <div class="row">
            <form id="contact" method="post" class="col s12">
                <div class="row">
                    <div class="input-field col s12 m12 l4">
                        <input id="first_name" type="text" class="validate">
                        <label for="first_name">First Name</label>
                    </div>
                    <div class="input-field col s12 m12 l4">
                        <input id="last_name" type="text" class="validate">
                        <label for="last_name">Last Name</label>
                    </div>
                    <div class="input-field col s12 m12 l4">
                        <input id="phone" type="tel" class="validate" maxlength="10" minlength="10">
                        <label for="phone">Phone</label>
                    </div>
                    <div class="input-field col s12">
                        <input id="email" class="validate" type="email">
                        <label for="email">Email Address</label>
                    </div>
                    <div class="input-field col s12">
                            <textarea id="message" class="materialize-textarea validate"></textarea>
                            <label for="message">How can we help?</label>
                    </div>
                </div>
            </form>
            <div class="hide" id="msgSubmit"></div>
        </div>
        <div class="modal-footer">
            <button class="btn waves-effect light-green accent-4" type="submit">Submit <i class="material-icons right">send</i></button>
        </div>
    </div>

我也在使用如下的Ajax：

 $(function (){
    $("#contact").on("submit", function(e){
        e.preventDefalut();
        submitForm();
    });
});

function submitForm() {
    var fname = $("#first_name").val();
    var lname = $("#last_name").val();
    var phone = $("#phone").val();
    var email = $("#email").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "contact.php",
        data: "fname=" + fname + "&lname=" + lname + "&phone=" + phone + "&email=" + email + "&message=" + message,
        sucess : function(text) {
            if(text == "success") {
                formSuccess();
            } else {
                formError();
                submitMSG(false, text);
            }
        }
    });
};

function formSuccess() {
    $("#contact")[0].reset();
    submitMSG(true, "We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number to contact us")
}

function formError() {
    $("#contact").removeClass().addClass(), function() {
        $(this).removeClass();
    }
}

function submitMSG(valis, MSG) {
    if(valid) {
        var msgClasses = "h3";
    } else {
        var msgClasses = "h3";
    }
    $("#msgSubmit").removeClass.addClass(msgClasses).text(msg);
} 

最后是PHP代碼

    <?php
$errroMSG = "";

if (empty($_POST["fname"])) {
    $errorMSG = "First Name is required ";
} else {
    $fname = $_POST["fname"];
}

if (empty($_POST["lname"])) {
    $errorMSG = "Last Name is required ";
} else {
    $lname = $_POST["lname"];
}

if (empty($_POST["phone"])) {
    $errorMSG = "Phone is required ";
} else {
    $phone = $_POST["phone"];
}

if (empty($_POST["email"])) {
    $errorMSG = "Email is required ";
} else {
    $email = $_POST["email"];
}

if (empty($_POST["message"])) {
    $errorMSG = "Message is required ";
} else {
    $pmessage = $_POST["message"];
}

$EmailTo = "test@gmail.com";
$Subject = "New message from United Constructions";

$Body .= "First Name: ";
$Body .= $fname;
$Body .= "\n";

$Body .= "Last Name: ";
$Body .= $lname;
$Body .= "\n";

$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

$success = mail($EmailTo, $Subject, $Body, "From:".$email);

if ($success && $errorMSG == ""){
    echo "success";
 }else{
     if($errorMSG == ""){
         echo "Something went wrong :(";
     } else {
         echo $errorMSG;
     }
 }
?>

因此，我可以打開模式，並在填寫完詳細信息后單擊“提交”按鈕。 如果可以，我也無法將Google reCaptcha添加到此表單，如果可以，我可以將其添加到JS或PHP。 如果將其添加到PHP，則必須對JS文件進行任何更改。 非常感謝您的回復。

Answer 1

很簡單，只需更改/替換上面代碼的ajax部分：

$(function (){
    $("#contact").on("submit", function(e){
        e.preventDefault();
        submitForm();
    });
});

至：

$(function (){
    $("#contact").submit(function(e){
        submitForm();
        e.preventDefault();
    });
});