HTML：通过默认电子邮件客户端有选择地发送电子邮件

Question

下面是我的代码示例。

基本上，我试图通过使用计算机的默认电子邮件客户端，在我的网页上发送电子邮件，而不使用 HTML 以外的任何内容。

到目前为止一切正常。

信息填写完毕后，“发送消息”按钮将在计算机默认的电子邮件客户端中为用户撰写电子邮件。

但是，我有多个要使用的电子邮件地址。我的代码允许我向所有电子邮件发送电子邮件，但我希望允许用户选择要发送到的电子邮件，而无需使用 php 或 asp 之类的任何东西。我想保持这个“尽可能简单”。

有人知道如何使选择与我的代码一起使用吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>EMAIL</title>
</head>

<body>
    <form method="post" action="mailto:...@email.com; ...@email.com" enctype="text/plain">
        <select name="carlist" form="carform">
            <option value="...@email.com">person1</option>
            <option value="...@email.com">person2</option>
        </select>

        <div>
            <div>
                <input name="name" placeholder="Name" type="text" class="text" />
            </div>
            <div>
                <input name="email" placeholder="Email" type="text" class="text" />
            </div>
        </div>
        <div class="row half">
            <div>
                <textarea name="message" placeholder="Message"></textarea>
            </div>
        </div>
        <div>
            <div ">
                                                <ul class="actions ">
                                                    <li><input type="submit " class="button " value= "Send Message "></li>
                                                    <li><input type="reset " class="button " value= "Clear Forum "></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

    </body>

    </html>

Answer 1

在回答您关于添加更多 jquery 或 javascript 的评论时：是的，您可以包含更多，只要您小心不要覆盖全局变量等。这是我的建议。你有：

<form method="post" action="mailto:...@email.com; ...@email.com" enctype="text/plain">
    <select name="carlist" form="carform">
        <option value="...@email.com">person1</option>
        <option value="...@email.com">person2</option>
    </select>

我会将<select> 更改为具有属性onChange - 只要下拉列表的值发生更改，此属性就会触发一些操作 - 我们将提供一个类似这样的 javascript 操作：

<select name="carlist" form="carform" onChange="updateForm();" id="carlist">

我已经给它一个id 以便更容易在 javascript 中进行选择。我们将在此处对您的 <form> 标签执行相同操作：

<form method="post" action="etc" enctype="text/plain" id="mainForm">

然后，在您的 <form> 标签上方，我会放置以下 <script> 标签：

<script type="text/javascript>
function updateForm(){
    var email=document.getElementById("carlist").value;
    document.getElementById("mainForm").action="mailto:"+email;
}
</script>

然后，每当下拉列表发生变化时，javascript 都会自动更新<form action 以具有mailto: value of the dropdown 的值。

最后，开始的块：

<form method="post" action="mailto:...@email.com; ...@email.com" enctype="text/plain">
    <select name="carlist" form="carform">
        <option value="...@email.com">person1</option>
        <option value="...@email.com">person2</option>
    </select>

将结束：

<script type="text/javascript>
function updateForm(){
    var email=document.getElementById("carlist").value;
    document.getElementById("mainForm").action="mailto:"+email;
}
</script>
<form method="post" action="mailto:...@email.com; ...@email.com" enctype="text/plain" id="mainForm">
    <select name="carlist" form="carform" onChange="updateForm();" id="carlist">
        <option value="...@email.com">person1</option>
        <option value="...@email.com">person2</option>
    </select>