You are here: irt.org | Articles | JavaScript | Mail | Form -> Email -> Form... [ previous next ]
Published on: Saturday 28th March 1998 By: Martin Webb
Illustrates how you can complete a form and send the data entered via email to another person, who can load up the email in their browser and actually see the form as entered. This 'copy' form can then be updated and emailed to another person, and so on.
This form will however only work on NN4 as it uses a mailto: action which is not supported in MSIE3, and not fully supported in MSIE4. However, if you can dictate which browsers your users use, e.g. on an intranet, then this may be suitable for you.
You will be surprised to learn that the contents of the example described later on in this article will contain the following within the body of the sent email:
<SCRIPT SRC="http://www.irt.org/articles/js071/testform.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
inputSelectValue("selectList1",1);
inputSelectValue("selectList2",6);
inputTextValue("textBox1","some text");
inputCheckBoxValue("checkBox1",true);
inputCheckBoxValue("checkBox2",true);
</SCRIPT>When the recipient of the email receives this they can load the data sent into a browser, one that supports *.js files, and miraculously view the whole form as completed by the sender.
The reason this is possible is that the email includes an absolute reference to a JavaScript testform.js file that contains all the code necessary to display the form, and to set the values of the form elements.
When sending an email using a form, any form fields which are named have the name of the form field along with the value of the form field placed in the contents of the email.
For example the following form:
<FORM ACTION="mailto:someone@somewhere.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE="TEXT" NAME="myTextName" VALUE="123abc"> <INPUT TYPE="SUBMIT"> </FORM>
Will, when submitted, create an email with the following contents:
myTextName=123abc
Therefore, to place the contents of the previous example within an email the form would need to look something like:
<FORM ACTION="mailto:someone@somewhere.com" METHOD="POST" ENCTYPE="text/plain">
<TEXTAREA NAME="<SCRIPT SRC" ROWS="15" COLS="70">
"http://www.irt.org/articles/js071/testform.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
inputSelectValue("selectList1",1);
inputSelectValue("selectList2",6);
inputTextValue("textBox1","some text");
inputCheckBoxValue("checkBox1",true);
inputCheckBoxValue("checkBox2",true);
</SCRIPT>
</TEXTAREA>
<INPUT TYPE="SUBMIT">
</FORM>The lines between the <TEXTAREA> and </TEXTAREA> tags is the content of the textarea field.
Note that the name of the textarea is <SCRIPT SRC. When combined with the first line within the textarea "http://www.irt.org/articles/js071/testform.js"></SCRIPT> this forms the line:
<SCRIPT SRC="http://www.irt.org/articles/js071/testform.js"></SCRIPT>
The = sign is place there by the browser.
So now that we know how to place the required information within the content of an email, how do we use the JavaSript testform.js file to build up the form and set the values of the form element.
The initial blank form is output using just one line in an HTML file:
<SCRIPT SRC="http://www.irt.org/articles/js071/testform.js"></SCRIPT>
Because no values are set, then the form will be in its default state.
The contents of the testform.js file are explained below.
The first section of code builds the complete HTML required to output a form. In fact it builds two forms, dataForm which is used to capture the data entry, and emailForm which is used to send the email. In the production version the emailForm will use a hidden form field inplace of a textarea. The textarea is used to show you what happens when the form is submitted.
The example dataForm uses two select lists, a text field, two checkboxes, a text field for the recipient and a text field for the subject. This form can be customised to meet your needs.
Note that the submit button and the reset button are on the emailForm and not the dataform.
The emailForm has one named form element, the textarea, named as <SCRIPT SRC.
var output = ''; output += '<BODY><CENTER>'; output += '<H1>Form -> Email -> Form<\/H1>'; output += '<FORM NAME="dataForm">'; output += '<P><SELECT NAME="selectList1">'; output += '<OPTION SELECTED>Choose Color'; output += '<OPTION>Red'; output += '<OPTION>Orange'; output += '<OPTION>Yellow'; output += '<OPTION>Green'; output += '<OPTION>Blue'; output += '<OPTION>Indigo'; output += '<OPTION>Violet'; output += '<\/SELECT>'; output += '<P><SELECT NAME="selectList2">'; output += '<OPTION SELECTED>Choose Number'; output += '<OPTION>1'; output += '<OPTION>2'; output += '<OPTION>3'; output += '<OPTION>4'; output += '<OPTION>5'; output += '<OPTION>6'; output += '<OPTION>7'; output += '<OPTION>8'; output += '<OPTION>9'; output += '<\/SELECT>'; output += '<P>Enter some text: <INPUT TYPE="text" NAME="textBox1" SIZE=12 VALUE="">'; output += '<P>Tick this: <INPUT TYPE="checkbox" NAME="checkBox1" VALUE="YES" UNCHECKED>'; output += '<P>Or this: <INPUT TYPE="checkbox" NAME="checkBox2" VALUE="YES" UNCHECKED>'; output += '<P><HR><P><TABLE><TR><TD>To: <\/TD><TD><INPUT TYPE="TEXT" NAME="emailAddress" VALUE="" SIZE="40"><\/TD><\/TR>'; output += '<TR><TD>Subject: <\/TD><TD><INPUT TYPE="TEXT" NAME="subjectField" VALUE="Testing Form -> Email -> Form" SIZE="40"><\/TD><\/TR><\/TABLE>'; output += '<\/FORM>'; output += '<FORM NAME="emailForm" METHOD="POST" ENCTYPE="text/plain">'; output += '<INPUT TYPE="submit" value=" Send Form " onClick="populateForm()">'; output += ' <INPUT TYPE="BUTTON" value=" Reset Form " onclick="document.dataForm.reset();document.emailForm.reset()">'; output += '<P><HR><P><TEXTAREA NAME="<SCRIPT SRC" COLS=70 ROWS=15 WRAP="VIRTUAL">When the form is submitted the contents also appear here. In the production version this textarea is replaced with a hidden field.<\/TEXTAREA>'; output += '<\/FORM>'; output += '<\/BODY><\/HTML>'; document.write(output);
When the button within the emailForm labeled Reset Form is pressed both the dataForm and the emailForm are reset using the forms reset() method.
When the submit button within the emailForm is pressed the following populateForm() function is called.
The populateForm() function, first sets the action attribute of the emailForm to the mailto: email address contained in the emailAddress field of the dataForm, and the SUBJECT contained in the subjectField of the dataForm.
It then goes on to build up the contents of the email by first preparing the absolute reference to the JavaScript testform.js file. And then with the assistance of other JavaScript functions the values of each of the form fields in the dataForm.
Finally the textarea named <SCRIPT SRC within the emailForm is populated with the contents of the email. The populateForm() function then finishes and the emailForm submission proceeds to send the email.
function populateForm() {
var output = '';
document.emailForm.action = 'mailto:' +
document.dataForm.emailAddress.value +
'?SUBJECT=' +
document.dataForm.subjectField.value;
output += '"http://www.irt.org/articles/js071/testform.js"></SCRIPT>';
output += '\r\n\n<SCRIPT LANGUAGE="JavaScript">';
output += outputSelectValue("selectList1");
output += outputSelectValue("selectList2");
output += outputTextValue("textBox1");
output += outputCheckBoxValue("checkBox1");
output += outputCheckBoxValue("checkBox2");
output += '\r\n\n</SCRIPT>';
document.emailForm.elements["<SCRIPT SRC"].value = output;
}The following enabler functions provide generic access to the form fields in the dataForm, returning a line of script that contains the name of another JavaScript function that is passed the name of the form field plus the value of the form field.
function outputTextValue(name) {
return '\r\n\ninputTextValue("' + name + '","' + document.dataForm.elements[name].value + '");';
}
function outputSelectValue(name) {
return '\r\n\ninputSelectValue("' + name + '",' + document.dataForm.elements[name].selectedIndex + ');';
}
function outputCheckBoxValue(name) {
return '\r\n\ninputCheckBoxValue("' + name + '",' + document.dataForm.elements[name].checked + ');';
}The following enabler functions are those that when invoked by the contents of the email, reset the values of the required form fields. Again they are generic so that they can be used by any text, select or checkbox fields.
function inputTextValue(name,value) {
document.dataForm.elements[name].value = value;
}
function inputSelectValue(name,value) {
document.dataForm.elements[name].selectedIndex = value;
}
function inputCheckBoxValue(name,value) {
document.dataForm.elements[name].checked = value;
}In a production version of this tool the following line would be changed from:
output += '<P><HR><P><TEXTAREA NAME="<SCRIPT SRC" COLS=70 ROWS=15 WRAP="VIRTUAL">When the form is submitted the contents also appear here. In the production version this textarea is replaced with a hidden field.<\/TEXTAREA>';
to:
output += '<P><HR><P><INPUT TYPE="HIDDEN" NAME="<SCRIPT SRC">';
As mentioned already the initial HTML required to display the form is very simple:
<SCRIPT SRC="http://www.irt.org/articles/js071/testform.js"></SCRIPT>
You can view the source code of JavaScript:
Click here for a working example.