HTML: Send email selectively through default email client

StackOverflow https://stackoverflow.com/questions/23147756

Question

Below is a sample of my code.

Basically I am trying to send email on my web page without using anything other than HTML, by using computer's default email client.

So far everything works.

When information are filled in, the "Send Message" button will compose the email in computer's default email client for user.

However I have multiple email addresses that I want to use. My code allows me to send email to all emails, but I want to allow the user to choose which email to send to without using anything like php or asp. I want to keep this as "simple as possible".

Anyone have any idea on how to make the select work with my code?

<!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>
Was it helpful?

Solution

In answer to your comment about adding more jquery or javascript: Yes, you can include more, so long as you're careful not to overwrite global variables, etc. Here's what I recommend. You have:

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

I would changes the <select> to have an attribute, onChange - this attribute will fire some action whenever the value of the dropdown changes - we'll give a javascript action like so:

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

I've given it an id to make it easier to select in the javascript. We'll do the same to your <form> tag here:

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

Then, right above your <form> tag, I'd put the following <script> tag:

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

Then, any time the dropdown changes, the javascript will automatically update the <form action to have a value of mailto: value of the dropdown.

In the end, the block that started out:

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

Will end: 

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top