Related items

Form -> Email -> Form...- source

You are here: irt.org | Articles | JavaScript | Mail | Form -> Email -> Form... [ previous next ]
Published on: Saturday 28th March 1998 By: Martin Webb
testForm.js

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);

function populateForm() {
    var output = '';

    document.emailForm.action = 'mailto:' +
                                document.dataForm.emailAddress.value +
                                '?SUBJECT=' +
                                document.dataForm.subjectField.value;

    output += '"http://www.irt.org/articles/js075/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;
}

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 + ');';
}

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;
}

//    if (elementType == "radio")    outputFormElement(object[elementValue].checked);
Return
Related items

Advanced mailto: techniques