PHPMailer触发邮件事件后自定义提示消息不显示问题排查

问题原因 #

• JS执行时机错误：PHP输出的脚本放在整个HTML文档最顶部，此时jQuery还未加载，DOM元素也没有完成渲染，直接调用$操作DOM必然失败
• 选择器不匹配：邮件发送成功分支的JS里使用了#emailSuccess、#emailError两个不存在的ID，实际页面里成功/失败提示的ID是emailGood、emailBad
• 语法错误：alert("Email sent);和alert("Email failed);都缺少字符串闭合引号，语法错误会直接阻断后续JS代码执行
• 选择器多了多余空格：底部document.ready里的$("#emailGood ")、$("#emailBad ")ID后面多了空格，会被识别为查找对应ID元素的子元素，无法匹配到目标节点

修复方案 #

1. 调整PHP逻辑，不要在DOCTYPE前输出JS代码，先把邮件发送结果存在变量中

<?php
session_start();
$mailSendResult = '';
if (mail($to, $subject, $message, $headers)) {
    $mailSendResult = 'success';
} else {
    $mailSendResult = 'error';
}
?>

2. 删掉原来PHP中输出的两段<script>代码，修改底部document.ready内的逻辑，根据邮件发送结果执行对应操作，同时修复语法和选择器错误

$(document).ready(function() {
    <?php if ($mailSendResult === 'success'): ?>
        alert("Email sent");
        $("#main").hide();
        $("#emailGood").show();
        $("#emailBad").hide();
    <?php elseif ($mailSendResult === 'error'): ?>
        alert("Email failed");
        $("#main").hide();
        $("#emailGood").hide();
        $("#emailBad").show();
    <?php else: ?>
        // 普通访问页面时展示表单
        $("#main").show();
        $("#emailGood").hide();
        $("#emailBad").hide();
    <?php endif; ?>
})

注：上面代码里用了jQuery内置的hide()、show()方法，等价于原来的css('display','none')、css('display','block')写法，可读性更高。

内容的提问来源于stack exchange，提问作者Melon