C and S Design.
Search Friendly Programming and Design

Go to -> C and S Design -> Articles -> Code -> Javascript -> Send Email -> Show Code

Click here to view or download the code for this example



Code Articles - Javascript

Populate Email message with javascript

Sending emails using javascript is not really recommended practice, because depending on the end user browser and anti-virus settings it can (and will) throw up security warnings and possibly be blocked from completion.
However in some browsers Mozilla FireFox and Netscape notably it will open the users email program with a pre-populated message provided there is an email client on the machine rather than a web-based mailer such as Hotmail, Yahoo or Gmail. It is unlikely that any of these type of mailers will actually populate the message.
However if this is for a intranet or LAN system, a help desk for example, where the configuration of the clients is known beforehand, this method can be fairly reliable.

The Code

Javascript

All the script does is get the values from the first form (bookingForm) into variables, then concatenate those variables into a plain text message, which is then loaded into the "Message" hidden input element of the second form (sendForm). A hidden element is also set visible to let the end user know that the mail has been created or sent
The form mailto: action is then triggered on the script return and the values in inputs of sendForm will be passed to the mail message body.

HTML

The HTML part is pretty straight forward, two forms are declared, one to hold the inputs for the data to be collected, the second to be a vehicle for the formatted data prior to the message being sent.
One form needs to be declared with nothing more than a name, the action and method can be left blank as this form is not designed to be submitted.
The other form needs a name, a mailto: action with the recipients email address and a subject line and the method set as "post".

Formatting the message

For formatting the message it is simply a matter of getting the various inputs from your form into variables and concatenating them into a single string using line breaks where appropriate.

Valid HTML 4.01! Valid CSS! copyright © C and S Design 2004 - 2005
Website Design and SE Friendly Coding C and S Design