Hi,
I am new to web development and am having certain issues with my email submission form.
What I am trying to do is, generate the email template in a particular format on my outlook by clicking on the submit button. The subject of the email should be the one given in the form and the rest of the input should be rendered into the body in the body format. The email template wouldn't get generated. As soon as I click on submit, all the input that I've typed disappears. The following is the code I have been using.

Note: The code in blue works for me, but the code in red doesn't. Please help.


This is fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submission via Email</title>
<script type="text/javascript">
function validate(){
if (document.getElementById('lastname').value != '') {

var body = document.getElementById('body');

body.value = "[STARTBODY]";
body.value += "firstname=" + document.getElementById('firstname').value;
body.value += ":lastname=" + document.getElementById('lastname').value;
body.value += ": phone=" + document.getElementById('phone').value;
body.value += ":comment=" + document.getElementById('comment').value;
body.value += "[ENDBODY]";

var subj = document.getElementById('subject');
subj.value = "New Candidate: ";
subj.value += document.getElementById('lastname').value;

var serviceAddress = document.getElementById('serviceAddress');
var actionString = "mailto:" + serviceAddress.value;

var theForm = document.forms[0];
theForm.action = actionString;

return true;
} else {
alert('Last Name is required');
return false;
}
}
</script>
<style>
td.label {text-Align: right;}
td.data {text-Align: left;}
td.button {text-Align: center;}
</style>
</head>
<body>

<div id="main">

<p>
<form id="emailForm" onsubmit="return validate();" method="get" >
<table>
<tr>
<td class="label">Email Service Address:</td>
<td class="data"><input id="serviceAddress" type="text" size="75" /></td>
</tr>
<tr>
<td class="label">First Name:</td>
<td class="data"><input id="firstname" type="text"/></td>
</tr>
<tr>
<td class="label">Last Name:</td>
<td class="data"><input id="lastname" type="Text"/></td>
</tr>
<tr>
<td class="label">Phone:</td>
<td class="data"><input id="phone" type="text"/></td>
</tr>
<tr>
<td class="label">Comments:</td>
<td class="data"><textarea id="comment" cols="50" rows="8"></textarea></td>
</tr>
<tr>
<td colspan="2" class="button"><input type="submit" value="Submit" /></td>
</tr>
</table>
<input type="hidden" name="subject" id="subject" />
<input type="hidden" name="body" id="body" />
</form>
</p>
</div>
</body>
</html>

This doesn't work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Request generator</title>
<script type="text/javascript">
function validate(){
if (document.getElementById('lastname').value != '' && document.getElementById('status').value != '') {

var body = document.getElementById('body');

body.value = "[STARTBODY]"; // 11 CHARS
body.value += "salutation=" + document.getElementByID('salutation').value;
body.value += ":firstname=" + document.getElementById('firstname').value;
body.value += ":lastname=" + document.getElementById('lastname').value;
body.value += "riority=" + document.getElementById('priority').value;
body.value += ":description=" + document.getElementById('description').value;
body.value += "[ENDBODY]"; // 9 CHARS

var subj = document.getElementById('subject');
subj.value = document.getElementById('sub').value;

var serviceAddress = document.getElementById('serviceAddress');
var actionString = "mailto:" + serviceAddress.value;

var theForm = document.forms[0];
theForm.action = actionString;


return true;
} else {
alert('Last Name and Status are required');
return false;
}
}
</script>
<style>
td.label {text-Align: right;}
td.data {text-Align: left;}
td.button {text-Align: center;}
</style>
</head>
<body>

<div id="main">

<p>
<form id="emailForm" onsubmit="return validate();" method="get" >
<table>
<tr>
<td class="label">Email Service Address:</td>
<td class="data"><input id="serviceAddress" type="text" size="75" /></td>
</tr>
<tr>
<td class="label">Salutation:</td>
<td class="data"><select id="salutation">
<option>
Mr.
</option>
<option>
Ms.
</option>
<option>
Mrs.
</option>
<option>
Dr.
</option>
<option>
Prof.
</option>
</select>
</td>
</tr>
<tr>
<td class="label">First Name:</td>
<td class="data"><input id="firstname" type="text"/></td>
</tr>
<tr>
<td class="label">Last Name:</td>
<td class="data"><input id="lastname" type="Text"/></td>
</tr>
<tr>
<td class="label">Priority:</td>
<td class="data"><select id="priority">
<option>
High
</option>
<option selected="selected">
Medium
</option>
<option>
Low
</option>

</select>
</td>
</tr>
<tr>
<td class="label">Subject:</td>
<td class="data"><input id="sub" type="text" size="75"/></td>
</tr>

<tr>
<td class="label">Description:</td>
<td class="data"><textarea id="description" cols="50" rows="8"></textarea></td>
</tr>
<tr>
<td colspan="2" class="button"><input type="submit" value="Submit" /></td>
</tr>
</table>
<input type="hidden" name="subject" id="subject" />
<input type="hidden" name="body" id="body" />
</form>
</p>
</div>
</body>
</html>