|
Before your e.mail form is sent you want to be sure it has been completed otherwise you could end up sending an e.mail back asking for the information again. To overcome this there are several methods. The first is to use a form checker either on the CGI Host's side (like Cut & Paste Script where there is a facility to send the user back to a 'please complete' page which is on your site and you would design), or use something like this simple form checker.
Place the following in the <HEAD> section of your page:
<script language="JavaScript">
<!--
// Copyright information must stay intact
// FormCheck v1.10
// Copyright NavSurf.com 2002, all rights reserved
// Creative Solutions for JavaScript navigation menus, scrollers and web widgets
// Affordable Services in JavaScript consulting, customization and trouble-shooting
// Visit NavSurf.com at http://navsurf.com
function formCheck(formobj){
// name of mandatory fields
var fieldRequired = Array("FirstName", "LastName", "Sex", "Age", "Address");
// field description to appear in the dialog box
var fieldDescription = Array("Your First Name", "Your Last Name", "Your Sex", "Your Age", "Your Address");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
Followed by the following in the <BODY> section where you want the form (and form checker) to appear:
<form name="formcheck" method="POST" action="" onsubmit="return formCheck(this);">
<blockquote>
<blockquote>
<table border="0" cellpadding="8" cellspacing="0" width="50%">
<tr>
<td align="right" nowrap>First Name:</td>
<td><input type="text" name="FirstName" size="25"></td>
</tr>
<tr>
<td align="right" nowrap>Last Name:</td>
<td><input type="text" name="LastName" size="25"></td>
</tr>
<tr>
<td align="right" nowrap>Sex:</td>
<td>
<input type="radio" name="Sex" value="Male">Male <input type="radio" name="Sex" value="Female">Female
</td>
</tr>
<tr>
<td align="right" valign="top" nowrap>Age:</td>
<td>
<select name="Age">
<option>
<option>0 - 15
<option>15 - 21
<option>21 - 30
<option>31 - 40
<option>41 - 50
<option>51 - 60
<option>Above 60
</select>
</td>
</tr>
<tr>
<td align="right" valign="top" nowrap>Address</td>
<td>
<textarea rows="6" name="Address" cols="29"></textarea></td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</td>
</tr>
</table>
</blockquote>
</blockquote>
And the end result is this:
| 
