I am creating a form using only HTML and JavaScript where I want to be able to dynamically set the recipient of a POSTed form by altering the MAILTO: address or the CC address of the mailto: line. This will be determined by the value of a text box if at all possible. The purpose of this functionality is that the form data needs to be sent to a different manager depending on the choice they make in a drop down menu. I have seen this done in one place (http://javascript.internet.com/forms/multiple-mailer.html) but my issue is that I am populating my dropdown from a JS array which when selected populates some text fields just like (http://www.webdeveloper.com/forum/showpost.php?p=984036&postcount=8). So what I want to do is populate a hidden text input with my drop down and draw from that to determine who gets the email.
I should note that this is for a corporate INTRAnet site where lack of desktop email client is not an issue and where IE is the only browser usable. I do not have access to server-side tech so mailto is my only option, please refrain from wasting comments telling me how bad an idea it is, lol. Thanks!
Thoughts?
To open the mail client with some email address:
location = 'mailto:' + email_address;
To set the href
of an a
element, first get it using something like document.getElementById
, then set the href
property:
document.getElementById('someLink').href = 'mailto:' + email_address;
email_address
is a string containing the applicable email address -- you can replace this with an expression that gets the value of the dropdown:
document.getElementById('someLink').href = 'mailto:' + document.getElementById('dropdown').value;
You can just set the href
attribute to a string containing an email address using Javascript.
Yes, it is possible. I have an option box in my form similar to this:
<td><select name="Division" id="Division" onChange="dirChange()" tabindex="3">
<option selected>Choose One</option>
<option value="Communications">Communications</option>
<option value="Legal Services">Legal Services</option>
</select> </td>
It refers to a javascript function:
function dirChange()
{
var i = document.all.Division.value;
switch (i)
{
case "Communications":
document.all.DeputyDirector.value = "Dave C.";
document.all.form.action = "mailto:Dave.C@xxxxx.com?subject=Form";
break;
case "Legal Services":
document.all.DeputyDirector.value = "Dixie P.";
document.all.form.action = "mailto:Dixie.P@xxxxxx.com?subject=Form";
break;
default:
document.all.DeputyDirector.value = "";
break;
}
}
This javascript then helps fill in the needed information on a text box and for the form to email to the selected person.
<tr>
<td class="announcementText"> <span class="style12"><span class="style16"><span class="style31">*</span></span></span>Division Deputy Dir.: </td>
<td><input name="DeputyDirector" type="text" id="DeputyDirector" style="background-color:#cccccc; color:black; font-weight:bold; border:0; overflow:visible" size="38"></td>
</tr>
<form onChange="dirChange()" method="post" enctype="text/plain" name="form" id="form" onSubmit="return checkform(this);">
The resulting html for the client, once they select a communications division is:
for the text box:
<input name="DeputyDirector" type="text" id="DeputyDirector" style="background-color:#cccccc; color:black; font-weight:bold; border:0; overflow:visible" size="38" value = "Dave C.">
and for the form:
<form onChange="dirChange()" method="post" enctype="text/plain" name="form" id="form" onSubmit="return checkform(this); action = "mailto:Dave.C@xxxxx.com?subject=Form">
or if they select legal services
for the text box:
<input name="DeputyDirector" type="text" id="DeputyDirector" style="background-color:#cccccc; color:black; font-weight:bold; border:0; overflow:visible" size="38" value = "Dixie P.">
and for the form:
<form onChange="dirChange()" method="post" enctype="text/plain" name="form" id="form" onSubmit="return checkform(this); action = "mailto:Dixie.P@xxxxxx.com?subject=Form">