将变量从 PHP 传递到 javascript 并传递到 html 表单

Posted 2023-02-24

【中文标题】将变量从 PHP 传递到 javascript 并传递到 html 表单

【英文标题】：Passing a variable from PHP to javascript and on to an html form

【发布时间】：2011-07-14 02:53:37

【问题描述】：

我在 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="[e-mail]" title="Enter your e-mail address" class="required email">

    <label for="phone">Phone</label>
    <input type="tel" name="phone" placeholder="ex. [phone]">

    <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 validate [jquery.validate.js] 和 form [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 的情况下使用表单）。它还对表单中添加的隐藏输入字段中的数据执行蜜罐验证码检查。然后发送电子邮件：

<?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 = '[e-mail]';
    $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 更改该警报消息的措辞以反映电子邮件是否已成功发送，因为我不知道如何传递必要的 pHp 变量 ($alert) 包含将服务器 PHP 进程中的错误消息列表添加到脚本中，以便在联系表单页面中插入。当然，这也是一个非常理论上的问题，因为由于上述原因，一个容易出错的消息甚至不太可能首先到达 PHP 阶段。

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

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

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

更新：我添加了此工作流程图以阐明此问题的设置：

【问题讨论】：

它应该可以工作。查看生成的页面；底部脚本的内容是什么？并且不要忘记引号。

@Tomalak：谢谢！我尝试 (1) 在 pPh 流程页面上将引号添加到上述脚本中，然后 (2) 将联系表单页面上脚本中的相应行更改为 $('#status').append(alert)。它不会在 Firebug 控制台中生成错误，但原始 pHp $alert 的文本不会粘贴到 html 元素中。尽管 Firebug 说该变量已被传递，但请参阅此屏幕截图以获取表单上的空元素：cl.ly/5BPx。

当我发送没有消息文本的提交时，我什至没有收到验证错误：提交成功。你需要大大缩小这个问题的范围，因为我怀疑你有几个。

@Donald：alert 在该代码中来自哪里？你从哪里传递它，以及如何传递？我想我现在明白了。您必须解析 AJAX 请求的结果以从其中检索 alert。我建议 send-message.php 返回 JSON。

您可能应该知道ereg, eregi and friends 在现代 PHP 版本中已被弃用。您可能应该停止使用它们。此外，您的电子邮件正则表达式过于严格，您应该考虑a more comprehensive drop-in solution..

【参考方案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，使这个过程更容易一些。我将把它作为练习留给读者.. 至少在这个问题线程中。

【讨论】：

哇：令人印象深刻，非常感谢。然而，发生的事情是变量现在清楚地进入了调用页面（参见屏幕截图底部的控制台输出：cl.ly/5Cus）。但是您还会从该屏幕截图中看到尚未附加#statusmsg html 元素。我不知道为什么，因为脚本说要附加到#status。

我研究过使用 JSON，发现：<script type="text/javascript"> var o = <?php echo json_encode($alert); ?>; alert(o.name); </script> 但它似乎也不起作用。

@Donald：该脚本标记与将 JSON 作为请求响应传递完全没有关系。现在让我们只关注 HTML。您需要使用 Firebug 调试我在上面发布的脚本。逐行遍历它，观察每个变量的内容，以及 $('#status') 的内容。另外我忘记了您需要删除display: none CSS（现已更新）；即使在浏览器中看不到，您仍应在 Firebug 控制台中看到附加到 $status 的文本。

我已经动员起来让新网站投入生产，但现在是online，所以今晚我将继续对沙盒网站上的联系表进行 beta 测试。使该站点脱离地面是一项大量的工作！现在这个传回数据问题的联系表格是唯一一个我还没有解决的问题……很快就会回来，带来更多结果，再次感谢。

【参考方案2】：

您希望返回成功或失败的电子邮件以响应 AJAX 调用。

对于此示例，您可以简单地返回 false 或 true。如果您需要更多信息，请返回 JSON 字符串，例如...

   "success": true,
   "something": ["something", "something-else"]

您可以在 PHP 中使用 json_encode() 轻松将数组转换为 JSON。

【讨论】：

谢谢。当然，我不只是想返回邮件是否发送成功。我还需要传递 pHp 进程存储在$alert 变量中的错误消息。这就是我无法传递给脚本的内容（请记住，pHp 和脚本位于不同的页面上）。