<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<style type="text/css">
H2 {
font-family: Arial;
font-size: 14pt;
}
</style>
<!-- This code will read any form data from within the EmailForm div tag and process it to become the output for an email
version of the form, thus removing the need to maintain two copies of the form code.
NOTE: If form is passed through email to a system that does not support HTML (like our secure email system)
the values will not show through. Might need to setup an alternate output.
USAGE:
1. Put the function into the head of your page.
2. Encapsulate the area of the form that you want to send as an email in a div tag with ID EmailForm. <div id="EmailForm">
3. Add this hidden field into your form: <input type="hidden" id="EmailOut" name="EmailOut">
4. Prevent sections of code from passing to email by enclosing it in a span tag: <span id="IgnoreMe">...code you do not want to show</span>
The function should be called prior to submitting the form. You could call it directly from an onsubmit function in your
form tag or at the end of your validation code.
You MUST pass the form object to the function.
Example: <form id="testform" method="post" action="mypage.asp" onsubmit="return formatform(testform)">
The name of the form passed to the formatform function should NOT be enclosed in quotes. This passes a reference to
the form object, not just the form name.
In your ASP page you can retrieve the value of the hidden field EmailOut to be used as the body of your email message.
NOTE In order for a field to be processed by this script it MUST have a name tag.
If you have a type="button" or type="submit" but no name tag with it, it will be ignored by the script.
What the code does:
Text and Textarea fields are altered to include the readOnly property.
Select fields: If the number of selected options (in a multiple select) exceeds the defined size then the
field size is altered to accomodate the number of selections. The non-selected options are included in the output
so that the field will maintain the same width as the original form but blank options are added in between the selected
and non-selected options to push them below the viewable window so they do not actually show in the output. The disabled property is set.
Radio and Checkbox fields have the Disabled property set.
Button and Submit types have their visibility style set to hidden. This keeps them in the page so formatting is not disturbed,
but it removes the possibility that they could be clicked.
NOTE: In future revision might need to loop through entire page to remove embeded code in <script, <object, <A, tags and any action events.
NOTE: Need to look into <embed tags as well and possible support for a multipart/alternative mime type so that both
a txt version and HTML version can be sent in the same email but only display in the correct format for the client.
-->
<script language="javascript">
function formatform(objForm) {
//Grab all embeded and included styles.
var outstyles = '';
var arrstyles = document.styleSheets;
for (var x=0;x<arrstyles.length;x++)
outstyles = outstyles + '<style type="text/css">' + arrstyles[x].cssText + '</style>';
var mydiv = escape(document.getElementById('EmailForm').innerHTML);
//Replace carriage returns with the equivalent character entities.
var obj = "%0D%0A";
while (mydiv.match(obj)) { mydiv = mydiv.replace(obj, " "); }
mydiv = unescape(mydiv);
//Strip out any HTML within span tags containing the word IgnoreMe.
var oRE = new RegExp('<span id="IgnoreMe">' + "[^>]*?" + '' + ".*?" + '</span>', "gi");
mydiv = mydiv.replace(oRE, '');
var sStart='';
var sMiddle='';
var sNewString='';
var elArr = objForm.elements;
for(var i=0; i<elArr.length; i++) {
//Loop through and process all form elements then replace the corresponding element in the mydiv HTML string with the modified one.
var ischecked=(elArr[i].checked)?' CHECKED':'';
var fldname=(elArr[i].name)?' name="new'+elArr[i].name+'"':'';
var rawname=(elArr[i].name)?elArr[i].name:'';
var sMiddle=(elArr[i].name)?' name='+elArr[i].name:'';
var fldvalue=(elArr[i].value)?' value="'+elArr[i].value+'"':'';
var rawvalue=(elArr[i].value)?elArr[i].value:'';
var fldsize=(elArr[i].size)?' size="'+elArr[i].size+'"':'';
var fldmaxlength=(elArr[i].maxLength)?' maxlength="'+elArr[i].maxLength+'"':'';
var fldrows=(elArr[i].rows)?' rows="'+elArr[i].rows+'"':'';
var fldcols=(elArr[i].cols)?' cols="'+elArr[i].cols+'"':'';
var fldclass=(elArr[i].className)?' class="'+elArr[i].className+'"':'';
var fldstyle=(elArr[i].style.cssText.length > 0)?' style="'+elArr[i].style.cssText+'"':'';
switch (elArr[i].type) {
case 'radio': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="radio" disabled' + ischecked + fldname + fldclass + fldvalue + fldstyle + '>'; break;
case 'checkbox': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="checkbox" disabled' + ischecked + fldname + fldclass + fldvalue + fldstyle + '>'; break;
case 'select-one': sOptions = getOptions(objForm, rawname); sStart = '<SELECT'; sEnd = '/SELECT>'; sNewString = '<SELECT disabled' + fldname + fldclass + fldstyle + ' size="' + sOptions.newfldsize + '">' + sOptions.outOptions + '</select>'; break;
case 'select-multiple': sOptions = getOptions(objForm, rawname); sStart = '<SELECT'; sEnd = '/SELECT>'; sNewString = '<SELECT disabled' + fldname + fldclass + fldstyle + ' size="' + sOptions.newfldsize + '">' + sOptions.outOptions + '</select>'; break;
case 'text': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="text" readOnly' + fldname + fldvalue + fldsize + fldmaxlength + fldclass + fldstyle + '>'; break;
case 'textarea': sStart = '<TEXTAREA'; sEnd = '/TEXTAREA>'; sNewString = '<TEXTAREA readOnly' + fldname + fldrows + fldcols + fldclass + fldstyle + '>' + rawvalue + '</TEXTAREA>'; break;
case 'button': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="button" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
case 'submit': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="submit" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
case 'reset': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="reset" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
default: sNewString = '';
}
if (sNewString != '' && sMiddle != '') {
var oRE = new RegExp(sStart + "[^>]*?" + sMiddle + ".*?" + sEnd, "i");
mydiv = mydiv.replace(oRE, sNewString);
}
}
var outhtml='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><META http-equiv=Content-Type content="text/html; charset=iso-8859-1">' + outstyles + '</head><body>' + mydiv + '</BODY></HTML>';
document.getElementById('EmailOut').value = outhtml;
return true;
}
function getOptions(f,e)
{ //Returns a formatted select field showing the selected options. Accomodates multiple selections.
var arrOptions = f[e].options;
var outsel = '';
var outunsel = '';
var outblank='';
var cntsel = 0;
for (var x=0;x<arrOptions.length;x++) {
var outoption = '<option value="' + arrOptions[x].text + '">'+arrOptions[x].text+'</option>';
if (arrOptions[x].selected) {
outsel = outsel + outoption;
cntsel++;
}
else {
outunsel = outunsel + outoption;
}
}
if (cntsel >= f[e].size) {
var newfldsize = cntsel;
var blanks = 0;
}
else {
var newfldsize = f[e].size;
for (var x=0;x<(f[e].size-cntsel);x++)
outblank=outblank+'<option value=" "> </option>';
}
var outOptions = outsel + outblank + outunsel;
return {outOptions : outOptions, newfldsize : newfldsize};
}
</script>
</head>
<body>
<form id="testform" method="post" action="testemail.asp" onsubmit="return formatform(testform)">
<div id="EmailForm">
<input name="company1" type="radio" value="1">List 1:<br>
<input type="radio" name="company1" value="2">List 2:<br>
<input type="checkbox" name="checkme">Check Me<br>
<br>
<select id="companylisting" name="companylisting" size="3" multiple>
<option value="0">Select an option</option>
<option value="1">Field 1</option>
<option value="2">Field 2</option>
<option value="3">Field 3</option>
<option value="4">Field 4</option>
<option value="5">Field 5</option>
<option value="6">Field 6</option>
<option value="7">Field 7</option>
<option value="8">Field 8</option>
<option value="9">Field 9</option>
<option value="10">Field 10</option>
</select>
<br><br>
<select id="companylist2" name="companylist2" size="5" style="color: red; font-weight: bold;">
<option value="0">Select an option first</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select><br>
<input value="Dummy" type="button" name="dummy"><br>
<input type="text" name="text1" value="stuff" class="furnlink"><br><br>
<textarea rows='10' name='FNO' cols='40'>Text info in here</textarea>
</div>
<input type="submit" value="Go">
<input type="hidden" id="EmailOut" name="EmailOut">
</form>
</body>
</html>
