Sending Email with an SMTP Client Built with Prototype and PHP - The complete client-side code of the SMTP application
(Page 2 of 4 )
Before I show you the signature of the PHP script that sends email using the data entered in the web form included in the corresponding user interface, first I'd like to list the full client-side code that belongs to the SMTP client, so you can quickly recall how it looked originally.
Given that, here is the pertinent code listing. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Prototype-based SMTP Client</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
p{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
padding-right: 100px;
text-align: right;
}
textarea{
width: 400px;
height: 300px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#maincontainer{
width: 600px;
height: 550px;
margin-left: auto;
margin-right: auto;
background: #f5ebb1;
border: 1px solid #000;
}
#state{
font: bold 12px Arial, Helvetica, sans-serif;
color: #00f;
padding: 10px 0 10px 10px;
}
.textbox{
width: 400px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
.formbutton{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// attach handler to window object
Event.observe(window,'load',initializeEmailClient,false);
// initialize email application
function initializeEmailClient(){
Event.observe
($('resetbutton'),'click',clearMessageField,false);
Event.observe('mailform','submit',sendEmail);
}
// reset 'message' field to send email
function clearMessageField(){
Field.clear($('message'));
}
// send http request
function sendEmail(e){
var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));
var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});
// prevent form from submitting
Event.stop(e);
}
</script>
</head>
<body>
<h1>Prototype-based SMTP Client</h1>
<div id="maincontainer">
<div id="state">STATUS: COMPOSING MESSAGE...</div>
<form id="mailform">
<p>To: <input type="text" id="to" title="enter email address of
recipient" class="textbox" /></p>
<p>Subject: <input type="text" id="subject" title="enter the
subject of your message" class="textbox" /></p>
<p>Cc: <input type="text" id="cc" class="textbox" /></p>
<p>Bcc: <input type="text" id="bcc" class="textbox" /></p>
<p><textarea name="message" title="Type here the text of your
message" id="message"></textarea></p>
<p><input type="submit" value="Send Message" class="formbutton"
title="Send Message"/>
<input type="reset" value="Clear All Fields" class="formbutton"
title="Clear All Fields" />
<input type="button" value="Clear Message" class="formbutton"
title="Clear Message" id="resetbutton"/></p>
</form>
</div>
</body>
</html>
So far, so good. Having listed the complete client-side code that corresponds to the SMTP client, it's time to move forward and take the next step involved in the development of this Prototype-based application.
As I mentioned before, we now need to create a simple PHP script which will be capable of sending email messages using the data provided by the user, that is the respective recipients, subject and text of the message in question, and so forth.
Therefore, in the section to come I'm going to build the aforementioned PHP script, in this way completing the development of this SMTP client.
Want to see how this step will be taken? Click on the link that appears below and keep reading.
Next: Sending email with PHP >>
More JavaScript Articles
More By Alejandro Gervasio
