Articles | Advanced MailTo: Techniques
| back
Introduction
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.
Using a link
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 output
mailto:?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>
|
To: Cc: and Bcc:
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>
|
Using a Form
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>
|
Multiple mailing using a 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>
|
Working Examples
Try the working examples: Using
a link, To: Cc: and Bcc:, Using
a Form, and Multiple mailing using a
form,
NOTE: The above links will open in a new window.
Articles | Advanced MailTo: Techniques
|
back
|
