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足够接近，jQuery将无法猜出你的意思。必须准确。有many options to use in the selectors，熟悉基础知识是很好的。

使用ajax / php在表单上显示消息

1 个答案: