如何在自提交表单上使用 mailto？

Question

我必须对现有代码进行修改，并且我正在努力使用 mailto 功能。我希望当我提交表单时，会使用 Outlook（或配置的任何其他邮件程序）打开预先填充的邮件，以便用户可以检查是否一切正常，然后提交带有表单数据的邮件。

我想使用mailto:，因为目前该页面（即在本地服务器上，而不是在互联网上）仅适用于 IE（最后一个开发人员使用 ActiveX 数据对象，它不适用于 Edge/Chrome /火狐）。

我已经尝试将mailto: 放在表单的action 标记中，但没有成功，我也尝试了一些javascript，但发生了同样的情况。此外，我的表单使用 $_SERVER['PHP_SELF'] 全局变量提交给自己。

表格/代码很大，所以我只会把可能对你有用的部分放在帮助我的地方。

这是我使用的表格：

echo "<FORM action=". $_SERVER['PHP_SELF'] . " name=\"form\" method=\"POST\">";
"my form here"
echo "<input type=\"submit\" name=\"Envoyer\" value=\"Send\"/>";
echo "</FORM>";

然后，我想从表单中获取数据并在用户点击提交按钮时打开一个邮件程序，其中包含一个预填充的邮件，其中包含数据。

这是我使用的：

echo "<script>
    var email = $maildest;
    var subject = \"Request of the user\";
    var emailBody = $MAIL;
    window.location = \"mailto:\"+email+\"?subject=\"+subject+\"&body=\"+emailBody;";
    echo "</script>";
echo "An OUTLOOK window opened with the informations you entered. <br/>Send the email so we can take it into account.<br/>
exit(0);

我没有任何错误消息，页面工作正常，但是当我点击提交按钮时，没有任何反应，甚至邮件程序打开窗口或其他任何东西都没有。我确定我缺少一些东西，而且我对 php/html/javascript 有点生疏，所以我来这里寻求您的帮助。

Answer 1

如果你不回显内容会更容易阅读

如果这样做，则需要连接 PHP 样式并为 JavaScript 使用反引号
注意：对于带有 ${} javascript vars 的行，您需要单引号，否则 $ 会被解释：

echo "<script> 
      var email = \"".$maildest."\"; 
      var subject = encodeURIComponent(\"Request of the user\"); 
      var emailBody = encodeURIComponent(\`".$MAIL."\`);"
echo 'window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;';
echo "</script>"; 

请注意 $MAIL 和最后一行的反引号，因为您可能在其中有换行符

你还需要转义空格和特殊字符

查看控制台 - mailto 通常作为表单操作效果更好

没有回声：

?>
An OUTLOOK window opened with the informations you entered. <br/>Send the email so we can take it into account.<br/>
<script>
    var email = "<?= $maildest ?>";
    var subject = encodeURIComponent("Request of the user");
    var emailBody = encodeURIComponent(`<?= $MAIL ?>`);
    window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;
    </script>
<? 
exit(0);
?>

这里是一个不使用服务器的版本：

window.addEventListener("load", function() {
  document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();
    var email = this.email.value,
      subject = encodeURIComponent("Request of the user"),
      elements = this.elements,
      emailTexts = [];
      
      [...elements].forEach(function(ele) {
        if (ele.type!="submit") emailTexts.push(ele.name + ":" + ele.value)
      })
    var emailBody = encodeURIComponent(emailTexts.join("\n"));
    var loc = `mailto:${email}?subject=${subject}&body=${emailBody}`;
    console.log(loc)
    window.location = loc;
  });
});

An OUTLOOK window will open with the informations you enter. <br/>Send the email so we can take it into account.<br/>
<form id="form" ....>
  Email: <input type="text" name="email" value="" /><br/> Name: <input type="text" name="Name" value="" /><br/> Comment: <textarea name="Comment"></textarea><br/>
  <input type="submit" />
</form>

Answer 2

您必须在表单上设置事件，因为您的 JS 代码仅在页面呈现时工作，而不是在表单提交时工作。

<form action=". $_SERVER['PHP_SELF'] . " name="form" method="POST" onsubmit="sendMail">
// Html form here
</form>
<script>
function sendMail(event) {
    // This method will stop default action of form's submit
    event.preventDefault();

    var email = "<?= $maildest ?>";
    var subject = encodeURIComponent("Request of the user");
    var emailBody = encodeURIComponent(`<?= $MAIL ?>`);
    window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;
}
</script>