Email Elements on Web Page - AJAX Solution

So yesterday I had to quickly come up with a solution to send out an email of a web page that was already rendered. I could go back through all the php server side code and try to hold all of the information in a cache variable that would then also email out the rendered html. This provided me with many complications and issues as I would then have scope to worry about in certain situations and some of the functions had been expressly written to spit out html as they run.

If you have read this far, then you understand the plight..
I came up with the following solution: I decided to try and create an AJAX solution. This is what I did:

Create a div container in your html. This Div Container should encompass everything yould like to appear in your email.


<DIV id="Email">

INSERT YOUR HTML IN HERE

<DIV>


now before this Div element, you will need to declare a form. Here you can declare where your destination ajax call ill be (ajaxsendemail.php), what to call on submit. We are disabling submit via html via return false. You can also see from this code that we have a button which will trigger the call to send the email.

<form id="emailForm" name="emailForm" method="post" action="ajaxsendemail.php" onsubmit="sendEmail(); return false;">

<input name="Send Email" type="button" value="Send Email" id="Send Email" onclick="sendEmail();"/>

<input type="text" name="to" id="to" value="recipient@email.com"/>

<input type="text" name="subject" id="subject" value="Email" />

<textarea>

<DIV id=/"Email">

INSERT YOUR HTML IN HERE

</DIV>

</form>

What you will need to know now is that we will be taking the html contents in the div container we created, then via ajax, we will send this html code through a post method to a php script which will then send the email to your desired destination. Please note that you will need the zxml javascript library:
Which the latest version that I have is here: zxml.js. Please be sure to check (and let me know) if there is an updated version.

So first, we will need to include some javascript on our page, preferably before the div container.

<script type="text/javascript" src="zxml.js"></script>

<script type="text/javascript" >



function sendEmail(){



var oForm = document.emailForm;

var sBody = getRequestBody(oForm);



var oXmlHttp = zXmlHttp.createRequest();

//alert(sBody);

oXmlHttp.open("post", oForm.action, true);

oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

oXmlHttp.onreadystatechange = function () {

if (oXmlHttp.readyState == 4) {

if (oXmlHttp.status == 200) {

//saveResult(oXmlHttp.responseText);

alert(oXmlHttp.responseText);

} else {

saveResult("An error occurred: " + oXmlHttp.statusText);

alert('error code');



}

}

};

oXmlHttp.send(sBody);

}



function getRequestBody(oForm) {

var aParams = new Array();



for (var i=0 ; i < oForm.elements.length; i++) {

var sParam = encodeURIComponent(oForm.elements[i].name);

sParam += "=";

sParam += encodeURIComponent(oForm.elements[i].value);

aParams.push(sParam);

}

//email body

var sParam = encodeURIComponent('emailBody');

sParam += "=";

sParam += encodeURIComponent(document.getElementById("Email").innerHTML);

aParams.push(sParam);



return aParams.join("&");

}

</script>

Simply speaking, getRequestBody() takes all the form elements that you have made and then creates a Post Body request. In here I have added a bit of code which simply takes the div element (called Email) and creates another Post Variable from this element. You could do this for multiple elements in your document. The send email, instantiates the ajax transport method and calls the getRequestBody to create the post body, which is sent in the command oXmlHttp.send(sBody); . I simply created an alert to let you know what happened with the Ajax call (was the email successful?).

Now we have to take a look at the php code which handles the actual email.
ajaxsendemail.php

<?php

$to = $_POST['to'];

$subject = $_POST['subject'];

$body = '<style type="text/css">

<!--

body,td,th {

font-family: Arial, Helvetica, sans-serif;

}

-->

</style>'.stripslashes($_POST['emailBody']);

$headers = 'MIME-Version: 1.0' . "\r\n";

$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

$headers .= 'From: Orders@NitroPrint.com <Orders@NitroPrint.com>' . "\r\n";

if (mail($to, $subject, $body, $headers)) {

echo("Message successfully sent!");

} else {

echo("Message delivery failed...");

}

?>

that pretty much takes care of it... I hope you will find this useful. If you have the time, please click through one of our fine sponsors.
In addition, if you have any difficulties or suggestions, please let me know.