php - 将变量从 PHP 传递到 javascript 再传递到 html 表单

Question

我在 WordPress 中使用 jQuery、jQuery 表单和 PHP Mail 设置的联系表单发送表单生成的电子邮件时遇到了一个非常小的问题。

为了替换我当前从联系表单页面执行 pHp 验证然后使用 PHP 邮件发送的联系表单，我设计了以下简单的 html 5 表单(可以在此页面上看到:http://edge.donaldjenkins.net/contact) :

<form id="contact" method="post" action="">
<fieldset>  

    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Your Name" title="Enter your name" class="required">

    <label for="email">E-mail</label>
    <input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email">

    <label for="phone">Phone</label>
    <input type="tel" name="phone" placeholder="ex. (555) 555-5555">

    <label for="website">Website</label>
    <input type="url" name="url" placeholder="http://">

    <label for="message">Question/Message</label>
    <textarea name="message"></textarea>

    <label for="checking" class="hidden">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" class="hidden">

    <input type="submit" name="submit" class="button" id="submit" value="Send Message" />

</fieldset>

然后我使用 jQuery 验证 [jquery.validate.js] 和表单 [jquery.form.js] 插件来执行客户端验证:

<script src="js/jquery.validate.js"></script>
<script src="js/jquery.form.js"></script>

<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: 'send-message.php',
    success: function() {
    $('#contact').hide();
    $('#instructions').hide();
    $('#status').show();
    $('#popular-posts').show();
    $('#status').append("<p>Thanks! Your request has been sent.  One will try to get back to you as soon as possible.</p>")
    }
    });
    }
});         
});
</script>

经过验证，上面的脚本使用了jQuery.form的ajaxSubmit function将日期提交到服务器 PHP 页面，send-message.php(原因是 javascript 无法发送电子邮件)。我使用这个 PHP 文件对数据进行第二次服务器端验证(虽然这可能是多余的，因为因为设置依赖于 javascript 将数据传递到服务器，所以可以放心地假设没有人会能够在不启用 javascript 的情况下使用表单)。它还对表单中添加的隐藏输入字段中的数据执行蜜 jar 验证码检查。然后发送电子邮件:

<?php 
//invoke wp_load in order to use WordPress wp_mail plugin function instead of mail for    better authentification of the sent email
require_once("/path/to/wp-load.php");

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
$captchaError = true;
$errors .= "\n Error: Captcha field filled in";
} else {

//Check to make sure that the name field is not empty
if(trim($_POST['name']) === '') {
    $errors .= "\n Error: Name field empty";
    $hasError = true;
} else {
    $name = strip_tags($_POST['name']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '')  {
    $emailError = 'You forgot to enter your email address.';
    $hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    $errors .= "\n Error: Message field empty";
    $hasError = true;
} else {
    $email = strip_tags($_POST['email']);
}

//Check to make sure comments were entered  
if(trim($_POST['message']) === '') {
    $errors .= "\n Error: Message field empty";
    $hasError = true;
} else {
    $phone = strip_tags($_POST['phone']);
    $url = strip_tags($_POST['url']);
    if(function_exists('stripslashes')) {
        $message = stripslashes(trim($_POST['message']));
    } else {
        $message = strip_tags($_POST['message']);
    }
}
//If there is no error, send the email
if(!isset($hasError)) {

    // Send Message 
    $emailTo = 'me@mydomain.com';
    $subject = 'Contact Form Submission from '.$name;
    $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nWebsite: $url \n\nMessage: $message";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    wp_mail($emailTo, $subject, $body, $headers);

    $alert = 'Thanks! Your request has been sent.  One will try to get back to you as soon as possible.';
} else {
    $alert = $errors;
}
} ?>

服务器会在变量 $alert 中跟踪是否发现错误或电子邮件是否已成功发送。

在 pHp 函数完成后，脚本会隐藏联系人页面中的表单，并显示一个先前隐藏的 html 元素，并向该元素附加一条警告消息。

我无法解决的问题是让 javascript 更改该警报消息的措辞以反射(reflect)电子邮件是否已成功发送，因为我不知道如何传递包含服务器 PHP 进程中的错误消息列表到用于在联系表单页面中插入的脚本。当然，这也是一个非常理论上的问题，因为出于上述原因，容易出错的消息甚至不太可能首先到达 PHP 阶段。

我试过在 PHP 文件的末尾插入以下代码，但无济于事:

<script type="text/javascript">
alert = <?php echo $alert; ?>;
</script>

后一种尝试不会在 Firebug 中产生任何错误，但不会传递变量值。欢迎任何想法或想法。

更新:我添加了这个工作流程图来阐明这个问题的设置:

Answer 1

在 send-message.php 中，将警告文本放在 IDd <div /> 中:

<div id="statusmsg" style="display: none">
<?php echo $alert ?>
</div>

然后调用页面上的 Javascript 应该如下所示:

<script type="text/javascript">
$(function() {
    $('#contact').validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url: 'send-message.php',
                success: function(data) {

                    $('#contact').hide();
                    $('#instructions').hide();
                    $('#status').show();
                    $('#popular-posts').show();

                    // Make DOM object from result
                    var $DOMObj = $(data);

                    // Retrieve status message, if any
                    var $status = $('#statusmsg', $DOMObj);

                    // Show status message, if any
                    if ($status) {
                          $status
                                 .css('display', '')
                                 .appendTo('#status');
                    }
            }
            });
        }
    });         
});
</script>

希望您能看到我如何使用 success 的参数回调以检索 AJAX 请求响应的 HTML 内容，找到 statusmsg div 并将其附加到调用页面上的相关元素。

更理想的是，send-message.php 将打印 JSON 而不是 HTML，使这个过程更容易一些。我将把它留给读者作为练习……至少在这个问题线程中是这样。