Question

我正在构建一个出现在jQuery弹出框中的联系表单。单击“提交”时，它使用AJAX和PHP脚本发送电子邮件。我的问题是，它不起作用。它继续并按常规提交表单，永远不会发送电子邮件。在.ajax函数中，既不调用成功函数也不调用错误函数。这是我的代码：

单击此按钮时弹出窗口:(此部分有效）

<a href="mailto:info@visionprintmedia.com" class="email">info@visionprintmedia.com</a>

jQuery脚本：

$(function() {
    $('a.email').click(function(event) {
        event.preventDefault();
        $('body').append('<div id="popupshadow"></div><div id="popup"></div>');
        $('#popupshadow').css({opacity:0}).animate({opacity:0.7},1000);
        $('#popup').css({opacity:0}).delay(1200).animate({opacity:1},800);
        $('#popup').html('<form class="contact" action="#" method="none"><table class="contact"><tr><td class="input-name">Name:</td><td><input type="text" name="name" size="25" /></td></tr><tr><td class="input-email">Email:</td><td><input type="email" name="email" size="25" /></td></tr><tr><td class="input-phone">Phone:</td><td><input type="phone" name="phone" size="25" /></td></tr><tr><td class="input-message">Message:</td><td><textarea name="message" cols="20" rows="5"></textarea></td></tr><tr><td></td><td><input type="submit" value="Send" /></td></tr></table><input type="hidden" name="to" value="' + $(this).attr('href').slice(7) + '"/></form><a href="mailto:' + $(this).attr('href').slice(7) + '" class="cancel">Send using your own mail program.</a>');
        $('form.contact').submit(function(event) {
            $('form.contact td').css('color','#000000');

            var name = $('form.contact input[name="name"]').val();
            var email = $('form.contact input[name="email"]').val();
            var phone = $('form.contact input[name="phone"]').val();
            var message = $('form.contact textarea[name="message"]').val();

            var valid = true;
            if(name == "") {
                valid = false;
                $('td.input-name').css('color','#FF0000');
            }
            if(email == "" && phone == "")
                valid = false;
            if(email == "")
                $('td.input-email').css('color','#FF0000');
            if(phone == "")
                $('td.input-phone').css('color','#FF0000');
            if(message == "") {
                valid = false;
                $('td.input-message').css('color','#FF0000');
            }

            if(valid) {
                $.ajax({url : 'http://nickentin.com/design/projects/visionprintmedia/js/contact.php',
                        data : {name : name,
                                email : email,
                                phone : phone,
                                message : message,
                                to : to},
                        type : 'post',
                        success : function(data) {
                            alert("SUCCESS");
                            $('#popup').html('<p style="text-align:center;">Your message has been sent.</p>');
                        },
                        error : function(data) {
                            alert("ERROR");
                        }
                });
            }
            event.preventDefault();
            return false;
        });
        $('#popupshadow, a.cancel').click(function(event) {
            $('#popup, #popupshadow').animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); });
        });
    });
});

PHP脚本：

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    $to = $_POST['to'];
    $subject = 'Contact Form - http://visionprintmedia.com';

    $message = '<style type="text/css">
                    #wrap {
                        width:400px;
                        margin:30px auto;
                        border:1px #000000 solid;
                    }
                    header {
                        width:100%;
                        height:50px;
                        display:block;
                    }
                    header h1 {
                        font-size:18px;
                        margin:0px;
                        padding-left:5px;
                        padding-top:15px;
                    }
                    table {
                        width:100%;
                    }
                    table td {
                        vertical-align:text-top;
                    }
                    table td:first-child {
                        width:75px;
                    }
                    a {
                        color:#333333;
                        text-decoration:none;
                    }
                    a:hover {
                        text-decoration:underline;
                    }
                </style>
                <div id="wrap">
                    <header>
                        <h1>Contact Form - http://visionprintmedia.com</h1>
                    </header>
                    <table>
                        <tr><td>Name:</td><td>'.$name.'</td></tr>
                        <tr><td>Email:</td><td>'.$email.'</td></tr>
                        <tr><td>Phone:</td><td>'.$phone.'</td></tr>
                        <tr><td>Message:</td><td>'.$message.'</td></tr>
                    </table>
                    <footer>
                        This message was sent to '.$to.' as part of an automated contact form.  If you do not believe that you should have received this email, please forward this message to design@nickentin.com and we will resolve the issue.
                    </footer>
                </div>';

    $headers = 'From: noreply@visionprintmedia.com' . "\r\n" .
               'Reply-To: ' . $email . "\r\n" .
               'MIME-Version: 1.0' . "\r\n" .
               'Content-type: text/html; charset=iso-8859-1' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();

    //mail($to,$subject,$message,$headers);
    mail('design@nickentin.com',$subject,$message,$headers); // FOR TESTING ONLY
?>

我在http://nickentin.com/design/projects/visionprintmedia/contact.html有一个实时版本。只需点击其中一个电子邮件链接即可。感谢。

Answer 1

你需要在这里改变一些东西：

<form class="contact" action="#" method="none">

将替换为：

<form class="contact" action="" method="post" onsubmit="return false;">

这是 HTML ，表单不能作为普通表单提交。接下来，为了确保调用AJAX函数，您需要添加：

<form class="contact" action="" method="post" onsubmit="return postAjax(this);">

JavaScript函数 postAjax(form)应定义为：

function postAjax(form)
{
     var post = form.serialize();
     // Send the `post` to the server using your AJAX function.
}

在 PHP脚本中，执行以下操作：

if(mail(...))
    die("OK");
else
    die("Error! Unable to send mail!");

在您的JavaScript中，对于该PHP代码，请在AJAX Receive函数中使用它：

if(response == "OK")
    alert("Mail Sent");
else
    alert(response);

希望这对你有所帮助！：）祝一切顺利！：）

Answer 2

您可以在帖子中获得所有表单字段。但是你在数据中提到它的“to”的价值是多少？你在php中使用过它脚本。尝试在表单中给出一些值，或者在php脚本中删除“$ to = $ _POST ['to'];”。

弹出框中的jQuery AJAX联系表单

2 个答案: