使用jquery设置自定义主题、正文等的Mailto

Question

使用jquery设置自定义主题、正文等的Mailto

3

我正在为我的团队创建一个自定义的HTML页面。我们使用下拉菜单、文本框和单选按钮来生成邮件字段。我们都使用IE和Outlook，所以这不是问题。我在尝试让“生成邮件”按钮填写消息时遇到了问题。我可以让邮件窗口弹出，但所有字段都是空白的。我需要根据他们在页面上选择的选项来填写主题、收件人、抄送和正文。以下是我的代码：

<script>
    $(function generateEmail() {
        var emailTo = $("#teamName").val();
        var emailCC = $("#CC").val();
        var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
        var emailBody = "Issue: " + $("#issue") + "<br>Contact info: " + $("#contactInformation") + "<br>Requested action: " + $(".requestedAction:checked");
        window.location.href = "mailto:" + emailTo + "&CC=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
    });
</script>

<body>
    <h1>Team</h1>
    <select id="teamName">
        <option value="a@a.com">Team A</option>
        <option value="b@b.com">Team B</option>
        <option value="c@c.com">Team C</option>
    </select><br><br>
    <h1>CC</h1>
    <input type="text" id="CC"><br><br>
    <h1>Issue</h1>
    <input type="text" id="issue"><br><br>
    <h1>Ticket Number</h1>
    <input type="text" id="ticketNumber"><br><br>
    <h1>Customer contact info</h1>
    <input type="text" id="contactInformation"><br><br>
    <h1>Requested action</h1>
    <input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
    <input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
    <input type="submit" value="Generate email" onclick="generateEmail()">
</body>

此外，我还需要使用换行和加粗字体格式化正文。上面的代码不起作用。我相当确定它不起作用是因为小于/大于符号的问题，但我不知道如何放置HTML代码。我知道这是可能的，因为我要替换的旧工具能够实现它，只是我不知道怎么做。请对我温柔点，我对jQuery和Javascript很新。提前谢谢！

- brianwantsblood

为什么你把函数放在 jQuery 选择器里面？那是错误的。 - epascarello

你有没有调查一下旧工具是怎么做的？ - KillerX

我试图分析旧工具，但它的格式非常糟糕，而且非常复杂和膨胀，充斥着不必要的代码。我无法真正理解它。我不知道为什么要将函数放在 jQuery 选择器中，我想这是因为旧代码也是这样做的。再次说明，我是新手！哈哈。 - brianwantsblood

你没有像应该的那样使用 ?。https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links 你没有取消点击操作，也没有使用 encodeURIComponent 对用户输入进行转义。 - epascarello

我该如何实现这些东西？ - brianwantsblood

2个回答

0

function generateEmail() {
  var emailTo = $("#teamName").val();
  var emailCC = $("#CC").val();
  var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
  var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
  location.href = "mailto:" + emailTo + "?" + 
    (emailCC ? "cc=" + emailCC : "") + 
    (emailSubject ? "&subject=" + emailSubject : "") + 
    (emailBody ? "&body=" + emailBody : "");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
 <option value="a@a.com">Team A</option>
 <option value="b@b.com">Team B</option>
 <option value="c@c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">

- zeff777

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- muecas · Accepted Answer

您在mailto URL中缺少?，因此查询字符串参数未传递（请注意在cc=之前的?）：

window.location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;

要添加换行符，您可以使用%0A%0A作为换行符。这将产生不同的段落，如下所示：

&body=first line %0A%0A second line

您的代码中也存在一些错误，缺少了一些val()调用来获取字段值，并且缺少了条件语句以检查字段是否设置（以构建查询字符串包括这些值或不包括这些值）。

function generateEmail() {
  var emailTo = $("#teamName").val();
  var emailCC = $("#CC").val();
  var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
  var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
  location.href = "mailto:" + emailTo + "?" + 
    (emailCC ? "cc=" + emailCC : "") + 
    (emailSubject ? "&subject=" + emailSubject : "") + 
    (emailBody ? "&body=" + emailBody : "");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
 <option value="a@a.com">Team A</option>
 <option value="b@b.com">Team B</option>
 <option value="c@c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">

希望这能帮到你。