The Making of a Simple, but Useful Dreamweaver Extension
Author: Colm
Gallagher
Author's Site: ColmGallagher.com
Reference ID: 15621
Creating the HTML file. Part 2 - The JavaScript.
The interface is done at this stage and should look something
like this.
Now we need to add the script that will give it some
functionality. This script will go into the body of the document, just
above our form.
| Our JavaScript Code |
What it does. |
| <script language="JavaScript"> |
Opening script tag. "This is a JavaScript",
it says. |
function objectTag(form) {
|
The objectTag function is built into
the Dreamweaver API and, when executed, will insert whatever it returns
into a HTML document. We want the results of our script to be inserted
into a HTML document so this is the perfect function for our purposes. |
var emailcc="";
var emailbody="";
var email="";
var emailsubject="";
var mailtext=""; |
Declare the variables we're going to
use. There's one for each text input field in our form. We're not
giving them a value just yet. The value is whatever is between the
quotes and we've left it empty for the moment. |
if (document.emailform.linktext.value
!= ""){
mailtext=document.emailform.linktext.value;
}
else {mailtext=''; } |
If the value of linktext field in the
form called emailform in this document isn't empty, then set the value
of our "linktext" variable to whatever was inputted into
that field by the user. If nothing was entered, leave it blank. This
will be the text for the link when it's viewed in a browser. |
if (document.emailform.emailtext.value
!= ""){
email='\?to\=' + document.emailform.emailtext.value;
}
else {email=''; } |
If the value of emailtext field in the
form called emailform in this document isn't empty, then set the value
of our "email" variable to whatever was inputted into that
field by the user preceded with "?to=". If nothing was entered,
leave it blank. This will be the recipients email in our mailto link.
You'll notice in the script that ? and = are preceded with a backslash.
These characters are reserved in JavaScript and must be "escaped"
if they are to be used in a string. The backslash is the JavaScript
escape character. |
if (document.emailform.subtext.value
!= ""){
emailsubject='\&subject\=' + escape(document.emailform.subtext.value);
}
else {emailsubject=''; } |
If the value of subtext field in the
form called emailform in this document isn't empty, then set the value
of our "emailsubject" variable to whatever was inputted
into that field by the user preceded with "&subject=".
If nothing was entered, leave it blank. This will be the subject in
our mailto link. escape( ) is a JavaScript function that converts
any reserved or special characters to hex code and we use it here
in case we need spaces in our subject. Unless spaces are encoded they
will break our URL. See URL encoding) |
if (document.emailform.cctext.value !=
""){
emailcc='\&cc\=' + document.emailform.cctext.value;
}
else {emailcc=''; } |
If the value of cctext field in the form
called emailform in this document isn't empty, then set the value
of our "emailcc" variable to whatever was inputted into
that field by the user preceded with "&cc=". If nothing
was entered, leave it blank. This will be the Cc email in our mailto
link. |
if (document.emailform.bodytext.value
!= ""){
emailbody='\&body\=' + escape(document.emailform.bodytext.value);
}
else {emailbody=''; } |
If the value of bodytext field in the
form called emailform in this document isn't empty, then set the value
of our "emailbody" variable to whatever was inputted into
that field by the user preceded with "&body=". If nothing
was entered, leave it blank. This will be the body text in our mailto
link. (escape( ) is a JavaScript function that converts any reserved
or special characters to hex code and we use it here in case we need
spaces or carraige returns in our body text. Unless spaces are encoded
they will break our URL.) |
if (document.emailform.emailtext.value
!= ""){
return ('<A HREF=\"mailto:' + email + emailsubject + emailcc
+ emailbody +'\">' + mailtext + '</A>');
}
else {
return('');
} |
If the email field in the form wasn't
left blank, Insert the code into the browser. If a field is empty
it will be ignored. If not it will be entered into the mailto link
with it's prefix. e.g. &cc=. |
}
</script> |
Close our script. |
The finished document should look something like this.
If you copied the finished document to your dreamweaver/configuration/objects/common
folder now, the extension would work just fine. But it would be much nicer
if we could install it through Macromedia's extension manager. To do this
we just need two more files, a GIF file for our icon and a .mxi file.
Let's do the GIF file next.
|