事实证明,提交表单是不必要的。使用您希望的各种表单元素创建 HTML 表单。这是我的表单的样子:
<form>
to:<input name="mailto" type="text">
re:<input name="subject" type="text">
body:<textarea name="body"></textarea>
<input type="button" onclick="processForm()">
</form>
注意,最后一个输入是阻止提交表单的按钮。按下时,元素的 onclick 事件属性会导致 processForm() 执行。该函数访问表单值并序列化除按钮之外的所有值,调整生成的字符串以便它可用于 mailto 协议,如下所示:
<script>
function processForm(){
var inputs = document.getElementsByTagName("input");
var message = document.getElementsByTagName("textarea");
var str = inputs[0].name + ":" + inputs[0].value; // mailto:[email address]
str += "?" + inputs[1].name + "=" + inputs[1].value; // ?subject=[subject]
str += "&" + message[0].name + "=" + message[0].value;// &body=[body]
str += str.replace(/\+/ig,"%20"); // url encode space char '+'
location.href=str; // invoke mailto
}
</script>
对 str 的最后调整是对其进行 urlencoded,这就是将 '+' 替换为 '%20' 的原因。如果其他内容需要编码,那么我将使用函数 encodeURI(),将 str 作为参数传递并将结果分配给变量。
脚本的最后一行调用 mailto 协议,该协议会激活系统上的任何电子邮件程序。在我的系统上,Outlook 会自动填写所有需要的字段。我通过向自己发送电子邮件测试了前面的代码,它工作正常。
您可以使用"JavaScript Form Serialize" 简化表单数据的序列化。注意:您仍然需要调整生成的字符串。见下文:
<script type="text/javascript" src="js/serialize-0.2.js"></script>
<script type="text/javascript">
document.getElementById("Serialize").onclick = function () {
var str = serialize(document.forms[0]);
var arr = str.split("&");
arr.reverse();
str = arr.join("&");
str = str.replace("mailto=","mailto:");
str = str.replace("&subject", "?subject");
location.href = str;
};
</script>
使用此解决方案,我将按钮替换为链接。当表单数据传递给 serialize() 时,结果输出中的数据以相反的顺序出现,主体首先出现。 arr.reverse() 恢复正确的顺序。剩下的调整是让 str 与 mailto 一起工作。
有关 mailto 的更多信息,请参阅详细的技术说明 here。如果您只想了解basics,以下链接会很有帮助。