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>
<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>
#----------------
Copyright © 1994 - 2018 Linux Journal. All rights reserved.
