You are here: irt.org | Articles | JavaScript | Mail | Advanced mailto: techniques [ previous next ]
Published on: Saturday 25th April 1998 By: Martin Webb
This article describes advance uses of the mailto: protocol. We'll describe five working examples that you can use for your own purposes: i) using a link, ii) To: Cc: and Bcc:, iii) using a form, iv) multiple mailing using a form. The last two will only work on Netscape Navigator, as Microsoft Internet Explorer does not fully support the mailto: action within a form. These examples can be used as a simple means of managing a simple email distribution list, or for passing email to more than one person.
This first example allows a form to override the action of a link. Not only that, but because the form has a MULTIPLE options list, the link can be set to send email to more than one person at once.
The way it works, is that a named link, in this example mailto:1, is found by a call to the function findMailtoLink() which searches through the entire length of the JavaScript links[] array until it finds the mailto:1 link. The function returns the index, i.e. i, which is stored in the mailtoLink1 variable.
When the link is selected, the onClick event handler invokes the addSimpleEmailAddresses() function, which builds up the output variable containing the string 'mailto:' followed by the value each of the options in the emailForm1 forms selectName select list, by checking whether each of the selections is currently selected. For each selected option the value is appended to the output variable.
This then builds up the outputmailto:?to=ww@ww.ww.ww&to=xx@xx.xx.xx. The output variable is then used to set the href property of the mailtoLink1 entry within the links[] array. Once this has been done the addSimpleEmailAddresses() function finishes and the href property of the mailto:1 navigates to the links href property, e.g. mailto:?to=ww@ww.ww.ww&to=xx@xx.xx.xx.
<SCRIPT LANGUAGE="JavaScript"><!--
function findMailtoLink(text) {
for (var i=0; i<document.links.length; i++)
if (document.links[i].href == text) return i;
return null;
}
function addSimpleEmailAddresses() {
var output = 'mailto:';
for (var i=0; i<document.emailForm1.selectName.length; i++) {
if (document.emailForm1.selectName[i].selected) {
if (output == 'mailto:')
output += '?to=' + document.emailForm1.selectName[i].value;
else
output += '&to=' + document.emailForm1.selectName[i].value;
}
}
document.links[mailtoLink1].href = output;
}
//--></SCRIPT>
<FORM NAME="emailForm1">
<SELECT MULTIPLE NAME="selectName">
<OPTION VALUE="ww@ww.ww.ww">ww
<OPTION VALUE="xx@xx.xx.xx">xx
<OPTION VALUE="yy@yy.yy.yy">yy
<OPTION VALUE="zz@zz.zz.zz">zz
</SELECT>
</FORM>
<A HREF="mailto:1" onClick="addSimpleEmailAddresses()">Send Mail</A>
<SCRIPT LANGUAGE="JavaScript"><!--
var mailtoLink1 = findMailtoLink('mailto:1');
//--></SCRIPT>This next example uses an identical technique to locate the the mailto:2 within the documents links[] array. However, instead of using a drop down box to select the individuals to be emailed, it uses a checkbox in combination with radio buttons to determine whether the individual should be sent the email using To:, Cc: or Bcc:, where To: means the individual is simply sent the email, Cc: means they are added to the list of people who are sent a carbon coby and Bcc: means they are added to the list of people who are sent a blind carbon copy, i.e. no one else knows they are sent a copy.
This time however the emailForm2 form is built up using JavaScript. The call to the displayList() function creates a table row for each individual/email passed to the showEntry() function. The displayList() function maintains the item variable that is incremented and passed to the showEntry() function. This item variable is used to name the checkboxes and radio buttons, for example the first checkbox is named c1, the first set of three radio buttons are all named r1. The individuals name (who) is simply output to the first table of the row. The checkbox and radio buttons are output to the second. The indivduals email address is used as the value of the checkbox. The three radio buttons are given the values to=, cc= and bcc= respectively.
Once the complete table is built the details are returned and written to the document.
When the mailto:2 form is clicked the forms onClick event handler invokes the addComplexEmailAddresses() function. This function calculates how many checkboxes there are (entries) by dividing the number (i.e. length) of elements in the form emailform2 by 4 (i.e. one checkbox plus three radio buttons).
The function then cycles through each checkbox by using the name cX where X is the number given originaly to each checkbox. If the checkbox is checked then the state of the radio buttons is examined by using the length of the radio group to cycle through each of the radio buttons. If a radio button is found to be checked then its value (i.e. to=, cc= or bcc=) is added to the output variable, followed eventually by the value of the checkbox.
Once all the checkboxes have been examined the href property of the mailtoLink2 entry within the links[] array is updated, prior to the link being activated. The href would have been set to something similar to: mailto:?to=ww@ww.ww.ww&cc=yy@yy.yy.yy&bcc=zz@zz.zz.zz
<SCRIPT LANGUAGE="JavaScript"><!--
function showEntry(who,email,r) {
var output = '<TR><TD>' + who + '<\/TD><TD><INPUT TYPE="checkbox" NAME="c' + item + '" VALUE="' + email + '"><\/TD>';
output += '<TD>[ To: <INPUT TYPE="radio" NAME="r' + r + '" VALUE="to=" CHECKED onClick="0">';
output += 'Cc: <INPUT TYPE="radio" NAME="r' + r + '" VALUE="cc=" onClick="0">';
output += 'Bcc: <INPUT TYPE="radio" NAME="r' + r + '" VALUE="bcc=" onClick="0"> ]<\/TD><\/TR>';
return output;
}
function displayList() {
var output = '<FORM NAME="emailForm2"><TABLE>';
var item = 0;
output += showEntry('ww','ww@ww.ww.ww',item++);
output += showEntry('xx','xx@xx.xx.xx',item++);
output += showEntry('yy','yy@yy.yy.yy',item++);
output += showEntry('zz','zz@zz.zz.zz',item++);
output += '<FORM><\/TABLE>';
return output;
}
function findMailtoLink(text) {
for (var i=0; i<document.links.length; i++)
if (document.links[i].href == text) return i;
return null;
}
function addComplexEmailAddresses() {
var output = 'mailto:';
var entries = document.emailForm2.elements.length/4;
for (var i=0; i<entries; i++) {
if (eval('document.emailForm2.c' + i +'.checked')) {
if (output == 'mailto:') output += '?';
else output += '&';
for (var j=0; j<eval('document.emailForm2.r' + i + '.length'); j++)
if (eval('document.emailForm2.r' + i +'[' + j + '].checked'))
output += eval('document.emailForm2.r' + i + '[' + j + '].value')
output += eval('document.emailForm2.c' + i + '.value');
}
}
document.links[mailtoLink2].href = output;
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
document.write(displayList());
//--></SCRIPT>
<A HREF="mailto:2" onClick="addComplexEmailAddresses()">Send Mail</A>
<SCRIPT LANGUAGE="JavaScript"><!--
var mailtoLink2 = findMailtoLink('mailto:2');
//--></SCRIPT>This example does not work in Microsoft Internet Explorer, as mailto: within forms is not supported.
This next example is relatively simple compared to the last. It uses the ability to alter the forms ACTION, METHOD and ENCTYPE in Netscape Navigator. When one of the two submit buttons is pressed the buttons onClick event handler invokes the alter() function passing a reference to this current form and the email address to be used.
The alter() function accepts a reference to the form as object and the email address as where and then updates the forms encoding property to text/plain, the forms action property to where and the forms method property to post. The submission of the form then continues and sends an email to the appropriate person.
<SCRIPT LANGUAGE="JavaScript"><!--
function alter(object,where) {
if (navigator.appName.indexOf('Netscape') > -1) {
object.encoding = 'text/plain';
object.action = where;
object.method = 'POST';
}
}
//--></SCRIPT>
<FORM ACTION="" METHOD="" ENCTYPE="">
<INPUT NAME="textName" TYPE="TEXT">
<INPUT TYPE="SUBMIT" onClick="alter(this.form,'mailto:yy@yy.yy.yy')">
<INPUT TYPE="SUBMIT" onClick="alter(this.form,'mailto:zz@zz.zz.zz')">
</FORM>This example does not work in Microsoft Internet Explorer, as mailto: within forms is not supported.
This last example demonstrates how to send an email to multiple individuals selected from a options list, but instead of sending the email to everyone in one go, it sends separate emails to each. It does this by altering the forms ACTION, submitting the form by using the the submit buttons click() method. It sets a timer running to process the next email after a 5 second delay.
There are actually two forms in this example controlForm which contains a select list selectName and two text boxes to and subject. The subject field is used to populate the subject field of the email. The to field is used as a diagnostic aid, so that you can see which is email is being sent. In the production version this can be amended to a hidden field.
The second form emailForm3 is the form that is submitted. When the mysubmit button is pressed for the first time the forms onSubmit event handler calls the sendEmail() function. It is worth pointing out that there are two variables item that is set to the length of the controlForm forms selectName select list, i.e. the number of options in the list, and current which is initially set to zero.
The sendEmail() function use the current variable to check whether the reference selection in selectName[] array is selected, if it is then it alters the action property of the emailForm3 to 'mailto:xx@xx.xx?subject=wwwwww' where xx@xx.xx is the value of the current selection within the selectName[] array and wwwwww is the value of the controlForm's subject field.
The current variable is incremented in preparation for processing the next email. If the current is less than the number of options in the list (i.e. itme) then a timer is set to submit the emailForm3 form in 5000 millieseconds (i.e. 5 seconds) by invoking the mysubmit buttons click() method. Using the click() method allows us to simulate the user pressing the mysubmit button. If we were simply to use the forms submit() method then the process would fail as it is not possibly to use JavaScript to submit a form where the ACTION is mailto:. Also using the submit() method stops the forms onSubmit event handler for being invoked. Using the click() overcomes these problems.
If the current selection in the selectName[] array had not been selected, then the current variable is incremented, and if the current variable is less than item then the emailForm3 forms mysubmit buttons click() method is invoked straight away.
Using a 5 second delay between sending one email and clicking the submit button, attempts to ensure that the first email has been sent before processing another.
This example, and the previous, use the feature where all named form fields are included within the body of the form, along with the named form fields values. So for example any information type into the content field will be sent in the body of the email.
<SCRIPT LANGUAGE="JavaScript"><!--
var current = 0;
function sendEmail() {
if (navigator.appName.indexOf('Netscape') > -1) {
if (document.controlForm.selectName[current].selected) {
document.emailForm3.action = 'mailto:' +
document.controlForm.selectName[current].value +
'?subject=' +
document.controlForm.subject.value;
document.controlForm.to.value = document.controlForm.selectName[current].value;
current++;
if (current < item) setTimeout('document.emailForm3.mysubmit.click()',5000);
else current = 0;
}
else {
current++;
if (current < item) document.emailForm3.mysubmit.click();
else current = 0;
}
}
}
//--></SCRIPT>
<FORM NAME="controlForm">
<SELECT MULTIPLE NAME="selectName">
<OPTION VALUE="xx@xx.xx">xx
<OPTION VALUE="yy@yy.yy">yy
<OPTION VALUE="zz@zz.zz">zz
</SELECT>
<P>To:<BR><INPUT TYPE="text" NAME="to" SIZE=72>
<P>Subject:<BR><INPUT TYPE="text" NAME="subject" SIZE=72>
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
var item = document.controlForm.selectName.length;
//--></SCRIPT>
<FORM NAME="emailForm3" ACTION="" METHOD="POST" ENCTYPE="text/plain" onSubmit="sendEmail()">
<P>Contents:<BR><TEXTAREA NAME="content" COLS=72 ROWS=20></TEXTAREA>
<P><INPUT TYPE="submit" NAME="mysubmit" VALUE="Send Email"> <INPUT TYPE="reset" VALUE="Reset">
</FORM>Try the working examples: Using a link, To: Cc: and Bcc:, Using a Form, and Multiple mailing using a form,