As it turns out submitting the form is unnecessary. Create an HTML form using the kinds of form elements that you wish. Here's what my form looks like:
<form>
to:<input name="mailto" type="text">
re:<input name="subject" type="text">
body:<textarea name="body"></textarea>
<input type="button" onclick="processForm()">
</form>
Note, the last input is a button which prevents submission of the form. When pressed, the element's onclick event attribute causes processForm() to execute. The function accesses the form values and serializes all except for the button, tweaking the resulting string so that it is usable for the mailto protocol, as follows:
<script>
function processForm(){
var inputs = document.getElementsByTagName("input");
var message = document.getElementsByTagName("textarea");
var str = inputs[0].name + ":" + inputs[0].value; // mailto:[email address]
str += "?" + inputs[1].name + "=" + inputs[1].value; // ?subject=[subject]
str += "&" + message[0].name + "=" + message[0].value;// &body=[body]
str += str.replace(/\+/ig,"%20"); // url encode space char '+'
location.href=str; // invoke mailto
}
</script>
The final adjustment to str is for it to be urlencoded which is the reason for replacing '+' with '%20'. If other content needs encoding, then I would use the function encodeURI(), passing str as a parameter and assign the result to a variable.
The last line of the script invokes the mailto protocol which causes whatever emailer is on your system to activate. On my system, Outlook springs up with all the desired fields automatically filled in. I tested the preceding code by sending an email to myself and it worked.
You could simplify serializing the form data with "JavaScript Form Serialize". Note: you'll still need to tweak the resulting string. See below:
<script type="text/javascript" src="js/serialize-0.2.js"></script>
<script type="text/javascript">
document.getElementById("Serialize").onclick = function () {
var str = serialize(document.forms[0]);
var arr = str.split("&");
arr.reverse();
str = arr.join("&");
str = str.replace("mailto=","mailto:");
str = str.replace("&subject", "?subject");
location.href = str;
};
</script>
With this solution, I replaced the button with a link. When the form data is passed to serialize(), the resulting output has the data in reverse order with the body appearing first. arr.reverse() restores the correct order. The remaining adjustments are so that str works with mailto.
For more info about mailto there is a detailed technical explanation here. The following link is beneficial if you just want to know the basics.
