A Web-Based Lunch Ordering System

Listing 1. Listing of the Lunch Web Page, lunch.html

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
<title>Colloqui Lunch Orders</title>
</HEAD>
<SCRIPT language="JAVASCRIPT">
//global variable for error flag
var errfound = false;

//function to validate by length
function ValidLength(item, len) {
   return (item.length > len);
}

//function to validate an email address
function ValidEmail(item) {
   if (!ValidLength(item, 5)) return false;
   if (item.indexOf (' 0) ==-1) return false;
   return true;
}

// display an error alert
function error(elem, text) {
// abort if we already found an error
   if (errfound) return;
   window.alert(text);
   elem.select();
   elem.focus();
   errfound = true;
}
// main validation function
function Validate() {
   errfound = false;
   if (!ValidLength(document.order.username.value, 0))
       error(document.order.username, "Need value for name.");
   if (!ValidLength(document.order.email.value, 0))
       error(document.order.email, "Need value for email.");
   if (!ValidEmail(document.order.email.value))
       error(document.order.email, "email incorrect. Need an @.");
   return !errfound; /* true if there are no errors */
}

// this displays the menu header
function MenuHeader() {
    today = new Date();
    document.write("<B> Date  : ", today, "</B><br>");
    document.write("<INPUT TYPE=\"HIDDEN\" NAME=date1 VALUE=\"", today, "<\\>"");
    document.write("<BR>");
    document.write("<TABLE BORDER=\"0\">");
    document.write("<TR>");
    document.write("<TD><B> First Name (lower case): </B></TD>");
    document.write("<TD><INPUT TYPE=\"text\" NAME=\"username\" SIZE=32></TD> <br>");
    document.write("</TR>");
    document.write("<TR>");
    document.write("<TD><B> Email :</B></TD>");
    document.write("<TD><INPUT TYPE=\"text\" NAME=\"email\" SIZE=32></TD><br>");
    document.write("</TR>");
    document.write("</TABLE>");
    document.write("<BR>");
}

// This displays the menu entries.
// This would probably make more sense
// if one looks at the displayed form
// theNumber is displayed on the form.
// theOrder is the variable this order will be associated with.
// theGroup is the variable rice type will be associated with ie fried/steamed.
function MenuEntry(theNumber, theOrder, theGroup) {
    document.write("<B>", theNumber, "</B>");
    document.write("<SELECT NAME=\"", theOrder, "\"> SIZE=6" );
    document.write("<OPTION VALUE=\"NONE\" SELECTED>00 None");
    document.write("<OPTION VALUE=\"L01\">01 Spring Rolls Rice Vermicelli");
    document.write("<OPTION VALUE=\"L32\">32 Roast Pork");
    document.write("<OPTION VALUE=\"L39\">39 Grilled Chicken");
    document.write("<OPTION VALUE=\"L40\">40 Diced Beef With Garlic");
    document.write("<OPTION VALUE=\"L41\">41 Chilli Chicken");
    document.write("<OPTION VALUE=\"L42\">42 Chicken Lemon Grass");
    document.write("<OPTION VALUE=\"L48\">48 Beef Black Bean");
    document.write("<OPTION VALUE=\"L49\">49 Chilli Beef");
    document.write("<OPTION VALUE=\"L50\">50 Beef Lemon Grass");
    document.write("<OPTION VALUE=\"MixVegChilli\">S1 Mixed Veg Tofu Chilli");
    document.write("<OPTION VALUE=\"MixVegSatay\">S2 Mixed Veg Tofu Satay");
    document.write("<OPTION VALUE=\"SingFrNoodl\">S3 Singapore Fried Noodles");
    document.write("</SELECT>");
    document.write("<INPUT TYPE=\"RADIO\" NAME=\"", theGroup,
            "\" VALUE=\"NA\" CHECKED>Not Applicable");
    document.write("<INPUT TYPE=\"RADIO\" NAME=\"", theGroup,
         "\" VALUE=\"Steamed\">Steamed Rice");
    document.write("<INPUT TYPE=\"RADIO\" NAME=\"", theGroup,
            "\" VALUE=\"Fried\">Fried Rice");
    document.write("<br>");
}
</SCRIPT>
<BODY>

<H1>
Lunch orders from Loi Loi's</h1>
(+61 3 9429 7161)
<A HREF="mailto:lunch@localhost?subject=Comments">
Feedback</A>
&nbsp;
<FORM NAME="order" onSubmit="return Validate();"
    ACTION=" http://localhost/cgi-bin/lunch.cgi" METHOD="post">
<SCRIPT language="JAVASCRIPT">
MenuHeader();
MenuEntry("01", "order1", "rice1");
MenuEntry("02", "order2", "rice2");
MenuEntry("03", "order3", "rice3");
MenuEntry("04", "order4", "rice4");
</SCRIPT>
<HR>
<TEXTAREA NAME="text1" ROWS="3" COLS="70">
Enter special orders/instructions here!
</TEXTAREA> <BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Go">
<INPUT TYPE="RESET" VALUE="Clear">
<BR> <BR>
<A HREF="images/loiloi.jpg"> <IMG SRC="images/loiloi.jpg" ALIGN=ABSMIDDLE BORDER="0"
 ALT="Menu"></A>
</FORM>
</BODY>
</HTML>
#----------------