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

时间:2014-04-18 05:09:21

标签: html email select send forum

以下是我的代码示例。

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

到目前为止一切正常。

填写信息时,"发送消息"按钮将在计算机的默认电子邮件客户端中为用户撰写电子邮件。

但是我有多个我想要使用的电子邮件地址。我的代码允许我向所有电子邮件发送电子邮件,但我想允许用户选择发送到哪个电子邮件而不使用像php或asp这样的东西。我希望尽可能保持简单和#34;。

任何人都知道如何使用我的代码进行选择工作?

<!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>

1 个答案:

答案 0 :(得分:0)

回答你关于添加更多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>