使用ajax / php在表單上顯示消息

Question

我正在嘗試創建ajax和php文件，因此當用戶在表單上輸入數據時，如果它無效則顯示錯誤消息，或者發送並發送電子郵件，如果有效則顯示感謝消息。 我很困惑，不確定為什么我的代碼無法正常工作，現在當我點擊“提交”時，頁面只是重新加載而沒有任何消息。

AJAX代碼：

$('document').ready(function () {

    var request;

    $('contact').submit(function(event) {

        event.preventDefault();

        if (request) {
            request.abort();
        }

        var $form = $(this);

        var $inputs = $form.find("inputs, select, buttons, textarea");

        var serializedData = $form.serialize();

        $inputs.prop("disabled", true);

        request = $.ajax({
            url: "../send_email.php",
            type: "post",
            data: serializedData
        });

        request.done(function (msg) {
            alert(msg);
        });

        request.fail(function (jqXHR, textStatus, errorThrown) {
            console.error(
            "The following error occurred: "+
            textStatus, errorThrown
            );
        });

        request.always(function () {
            $inputs.prop("disabled", false);
        });

    });//contact event

});//document ready

PHP代碼：

    <?php
    if(isset($_POST['email'])) {

        $email_to = "email@address.ca";
        $email_subject = "Personal Website Contact Form";

        $error_message = "";

        if(!isset($_POST['first_name']) ||
                !isset($_POST['last_name']) ||
                !isset($_POST['email']) ||
                !isset($_POST['comments'])) 
        {
            $error_message .= 'Please fill in all fields.\n'
        }
        else{
            $first_name = $_POST['first_name']; // required
            $last_name = $_POST['last_name']; // required
            $email_from = $_POST['email']; // required
            $comments = $_POST['comments']; // required

            $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

            if(!preg_match($email_exp,$email_from)) {
                $error_message .= 'The Email Address you entered does not appear to be valid.\n';
            }

            $string_exp = "/^[A-Za-z .'-]+$/";

            if(!preg_match($string_exp,$first_name)) {
                $error_message .= 'The First Name you entered does not appear to be valid.\n';
            }

            if(!preg_match($string_exp,$last_name)) {
                $error_message .= 'The Last Name you entered does not appear to be valid.\n';
            }

            if(strlen($comments) < 2) {
                $error_message .= 'The Comments you entered do not appear to be valid.\n';
            }

            if(strlen($error_message) == 0) {


            $email_message = "Form details below.\n\n";


            function clean_string($string) {
                $bad = array("content-type","bcc:","to:","cc:","href");
                return str_replace($bad,"",$string);
            }

            $email_message .= "First Name: ".clean_string($first_name)."\n";
            $email_message .= "Last Name: ".clean_string($last_name)."\n";
            $email_message .= "Email: ".clean_string($email_from)."\n";
            $email_message .= "Comments: ".clean_string($comments)."\n";


            // create email headers
            $headers = 'From: '.$email_from."\r\n".
            'Reply-To: '.$email_from."\r\n" .
            'X-Mailer: PHP/' . phpversion();
            @mail($email_to, $email_subject, $email_message, $headers); 

            echo "Email Sent. Thank you, I will get back to you asap";
            }
            else{
                echo $error_message;
            }
        }
    }
    ?>

Answer 1

$('document')

應該：

$(document)

我懷疑

$('contact')

應該：

$('#contact')

盡管我們必須一定要看一下您的HTML。 您正在尋找<contact>元素，其中沒有任何元素。 相反，我想象您想尋找類似<form id="contact"> 。

這些也是錯誤的：

$form.find("inputs, select, buttons, textarea")

HTML元素不是多元的：

$form.find("input, select, button, textarea")

您必須具體說明選擇器。 如果距離足夠近，jQuery將無法猜測您的意思。 必須准確。 選擇器中有許多選項可供使用，熟悉基礎知識是很好的選擇 。