My goal was to render the email version as completely true to the original as possible. The biggest problem was with select boxes as their size will always vary based on the longest option in the box.
I was originally converting the box into a text field displaying the selected option but the original select width could not be readily determined and used to set the width of the text box. If I left it as a select box with only the selected option the width could still be off if the length of the selected option is not as great as the longest option that was originally in that select.
My reason for worrying about this detail is that I intended the script to be a plug in script for others to use and if they have badly formatted pages a change in width of one field might throw everything else off.
I had the further difficulty of having to deal with multiple select boxes. My eventual solution if I remember correctly was to include ALL the options originally there so width would not be affected but to put all the selected options together and position them viewable with the height of the box appropriate to the number of options selected.
The only problem is that a multiple-select that was originally only one line high could be multiple lines high in the output and throw off the layout of the email version.
In the rare circumstance that someone has such badly designed HTML AND they are using a multiple select box, then they just have to live with the problem. I can't accomodate EVERYTHING.
For button and submit type fields I replicate them but set them to hidden so they still take up the same screen space as original to keep from throwing off any page formatting.
I have considered searching for and removing any script tags in the code as well and have been considering what to do about any images on the page.
Also I planned on researching into the use of multipart/alternative mime type so that I can generate a text AND html version of the form that would hopefully display only text or only HTML dependent on the recipients setup.
Let me know how it works for you and if you have any thoughts on improvements. I have not had time to work on it in a while though it is pretty usable as it sits.
Here is the documentation I keep in the script file when I give it to others to use at work.
Code:
<!-- 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 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.
-->
It's hard to think outside the box when I'm trapped in a cubicle.
