We have replaced the dummy order method with code that generates the order finalization page.
New or modified code is displayed in bold text.
<html>
<head>
<title>FOMS</title>
<script>
<!--
function makeEmptyArray() {
this.count = 0;
return(this);
}
function item(productType, id, name, price) {
this.productType = productType;
this.id = id;
this.name = name;
this.price = price;
return(this);
}
function olAddItem(productType, id, name, price) {
this.items.count++;
this.items[this.items.count] = new item(productType, id, name, price);
this.print();
}
function olRemoveItem(id) {
var index = 0;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].id == id) {
index = i;
break;
}
}
if(index) {
for(var i = index; i < this.items.count; i++) {
this.items[i] = this.items[i+1];
}
this.items.count--;
}
this.print();
}
function olClear() {
this.items.count = 0;
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
top.navFrame.itemFrame.document.itemForm.elements[i].checked = false;
}
}
this.print();
}
function olCheckItems() {
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
for(var j = 1; j <= this.items.count; j++) {
var checkID = top.navFrame.itemFrame.document.itemForm.elements[i].name.substring(4, top.navFrame.itemFrame.document.itemForm.elements[i].name.length);
if(this.items[j].id == parseInt(checkID))
top.navFrame.itemFrame.document.itemForm.elements[i].checked = true;
}
}
}
}
function olPrintItems(doc, productType) {
var first = true;
var done = false;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].productType == productType) {
if(first) {
doc.writeln("<tr><td width=\"50\"> </td><td colspan=\"3\">");
doc.writeln("<b>" + productType + "</b></td></tr>");
first=false;
}
doc.writeln("<tr><td> </td><td width=\"50\"> </td><td width=\"300\">");
doc.writeln(this.items[i].name);
doc.writeln("</td><td width=\"60\" align=\"right\">");
doc.writeln("$" + this.items[i].price + "</td></tr>");
}
}
}
function olPrintTotalPrice(doc) {
doc.writeln("<tr><td colspan=\"3\"><b>Total:</b></td><td align=\"right\"><b>");
var totalPrice = 0;
for(var i = 1; i <= this.items.count; i++) {
totalPrice += parseFloat(this.items[i].price);
}
var totalPriceStr = "" + totalPrice;
if(totalPriceStr.charAt(totalPriceStr.length-2) == '.') totalPriceStr += "0";
if(totalPriceStr.charAt(totalPriceStr.length-3) != '.') totalPriceStr += ".00";
doc.writeln("$" + totalPriceStr + "</b></td></tr>");
}
function olPrintOrderTable(doc) {
doc.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td colspan=\"4\">");
doc.writeln("<b>Items Selected</b></td></tr>");
this.printItems(doc,"CDs");
this.printItems(doc,"Records");
this.printItems(doc,"Tapes");
this.printTotalPrice(doc);
doc.writeln("</table>");
}
function olPrint() {
top.orderSummaryFrame.document.open("text/html");
top.orderSummaryFrame.document.writeln("<body>");
if(this.items.count > 0) {
top.orderSummaryFrame.document.writeln("<table width=\"100%\" border=\"0\">");
top.orderSummaryFrame.document.writeln("<tr valign=\"top\"><td>");
this.printOrderTable(top.orderSummaryFrame.document);
top.orderSummaryFrame.document.writeln("</td><td align=\"right\"><form>");
top.orderSummaryFrame.document.writeln("<input type=\"button\" value=\"Order Now\" onClick=\"top.myOrderList.order();\">");
top.orderSummaryFrame.document.writeln("<br><br><input type=\"button\" value=\"Clear\" onClick=\"top.myOrderList.clear();\">");
top.orderSummaryFrame.document.writeln("</form></td></tr></table>");
}
top.orderSummaryFrame.document.writeln("</body>");
top.orderSummaryFrame.document.close();
}
function olOrder() {
orderWindow = window.open("", "orderWindow", "scrollbars=yes");
d = orderWindow.window.document;
d.writeln("<html><head>");
d.writeln("<title>FOMS Order Form</title>");
d.write("<scr");
d.writeln("ipt>");
d.writeln("function validateForm() {");
d.writeln(" var valid=true;");
d.writeln(" if(document.orderForm.email.value.indexOf(\"@\")<3) {");
d.writeln(" alert(\"You MUST specify a valid email address.\");");
d.writeln(" valid=false;");
d.writeln(" }");
d.writeln(" return(valid);");
d.writeln("}");
d.write("</scr");
d.writeln("ipt>");
d.writeln("</head>");
d.writeln("<body>");
d.writeln("<form name=\"orderForm\" method=\"post\" action=\"sendorder.cgi\" onSubmit=\"return(validateForm());\">");
d.writeln("<center>");
d.writeln("<table width=\"580\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td align=\"center\">");
d.writeln("<h1>FOMS Order Form</h1>");
d.writeln("Please enter values in all relevant fields.<br> </td></tr>");
d.writeln("<tr><td align=\"center\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td>");
d.writeln("<pre>");
d.write("<b>Salutation: </b>");
d.write("<input type=\"radio\" checked name=\"salutation\" value=\"1\">Mr ");
d.write("<input type=\"radio\" name=\"salutation\" value=\"2\">Mrs ");
d.write("<input type=\"radio\" name=\"salutation\" value=\"3\">Miss ");
d.writeln("<input type=\"radio\" name=\"salutation\" value=\"4\">Ms");
d.write("<b>First Name: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"firstname\"> ");
d.writeln("Surname: <input type=\"text\" size=\"20\" maxlength=\"100\" name=\"surname\">");
d.writeln("Address: <input type=\"text\" size=\"52\" maxlength=\"100\" name=\"address\">");
d.write("Suburb: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"suburb\"> ");
d.writeln("State: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"state\">");
d.write("Postcode: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"postcode\"> ");
d.writeln("Country: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"country\">");
d.write("Phone: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"phone\"> ");
d.writeln("Fax: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"fax\">");
d.writeln("Email: <input type=\"text\" size=\"52\" maxlength=\"255\" name=\"email\">");
d.writeln("");
d.write("Credit Card: </b>");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"1\">Visa ");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"2\">MasterCard ");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"3\">BankCard ");
d.writeln("<input type=\"radio\" name=\"cardtype\" value=\"4\">AMEX");
d.writeln("<b>Name on Card: <input type=\"text\" size=\"52\" maxlength=\"50\" name=\"cardname\">");
d.write("Card Number: ");
d.write("<input type=\"text\" size=\"20\" maxlength=\"50\" name=\"cardnumber\"> ");
d.writeln("Expires: <input type=\"text\" size=\"20\" maxlength=\"20\" name=\"cardexpires\">");
d.writeln("");
d.writeln("<b>Payment Method:</b>");
d.writeln("</pre><table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr valign=\"top\"><td>");
d.writeln("<input type=\"radio\" checked name=\"paymenttype\" value=\"1\">Use payment details as above");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"2\">I will phone you with payment details");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"3\">I will fax you payment details");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"4\">I will send a cheque/money order");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"5\">Cash on Delivery (COD)");
d.writeln("</td><td>");
d.writeln("<b>FOMS</b>");
d.writeln("<br>PO Box 123");
d.writeln("<br>Musicland");
d.writeln("<br>Phone: 1800-998-FOMS");
d.writeln("<br>Fax: 1800-999-FOMS");
d.writeln("</td></tr></table>");
d.writeln("</td></tr></table>");
d.writeln("</td></tr>");
d.writeln("<tr><td align=\"center\"><br>");
this.printOrderTable(orderWindow.window.document);
for(var i=1; i<=this.items.count; i++) {
d.writeln("<input type=\"hidden\" name=\"item" + i + "_productType\" value=\"" + this.items[i].productType + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_id\" value=\"" + this.items[i].id + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_name\" value=\"" + this.items[i].name + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_price\" value=\"" + this.items[i].price + "\">");
}
d.writeln("</td></tr>");
d.write("<tr><td align=\"center\"><br><input type=\"submit\" value=\"Submit Order\"> ");
d.write("<input type=\"reset\" value=\"Clear all Values\"> ");
d.writeln("<input type=\"button\" value=\"Back to Catalogue\" onClick=\"window.close();\"></td></tr>");
d.writeln("</table>");
d.writeln("</center>");
d.writeln("</form>");
d.writeln("</body>");
d.writeln("</html>");
d.close();
}
function orderList() {
this.items = new makeEmptyArray();
this.addItem = olAddItem;
this.removeItem = olRemoveItem;
this.clear = olClear;
this.checkItems = olCheckItems;
this.printItems = olPrintItems;
this.printTotalPrice = olPrintTotalPrice;
this.printOrderTable = olPrintOrderTable;
this.print = olPrint;
this.order = olOrder;
this.itemsVisible = false;
}
var myOrderList = new orderList();
//-->
</script>
</head>
<frameset rows="*,50">
<frameset cols="255,*">
<frame name="navFrame" src="navframe.html">
<frame name="contentFrame" src="main.html">
</frameset>
<frame name="orderSummaryFrame" src="ordersummary.html">
</frameset>
</html>
|
The source of the page that is generated by this function will look something like this:
<html>
<head>
<title>FOMS Order Form</title>
<script>
function validateForm() {
var valid=true;
if(document.orderForm.email.value.indexOf("@") < 3) {
alert(\"You MUST specify a valid email address.\");
valid=false;
}
return(valid);
}
</script>
</head>
<body>
<form name="orderform" method="post" action="sendorder.cgi" onSubmit="return(validateForm());">
<center>
<table width="580" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<h1>foms order form</h1>
please enter values in all relevant fields.<br>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<pre><b>Salutation: </b><input type="radio" checked name="salutation" value="1">Mr <input type="radio" name="salutation" value="2">Mrs <input type="radio" name="salutation" value="3">Miss <input type="radio" name="salutation" value="4">Ms
<b>First Name: <input type="text" size="20" maxlength="50" name="firstname"> Surname: <input type="text" size="20" maxlength="100" name="surname">
Address: <input type="text" size="52" maxlength="100" name="address">
Suburb: <input type="text" size="20" maxlength="50" name="suburb"> State: <input type="text" size="20" maxlength="50" name="state">
Postcode: <input type="text" size="20" maxlength="50" name="postcode"> Country: <input type="text" size="20" maxlength="50" name="country">
Phone: <input type="text" size="20" maxlength="50" name="phone"> Fax: <input type="text" size="20" maxlength="50" name="fax">
Email: <input type="text" size="52" maxlength="255" name="email">
Credit Card: </b><input type="radio" name="cardtype" value="1">Visa <input type="radio" name="cardtype" value="2">MasterCard <input type="radio" name="cardtype" value="3">BankCard <input type="radio" name="cardtype" value="4">AMEX
<b>Name on Card: <input type="text" size="52" maxlength="50" name="cardname">
Card Number: <input type="text" size="20" maxlength="50" name="cardnumber"> Expires: <input type="text" size="20" maxlength="20" name="cardexpires">
<b>Payment Method:</b>
</pre>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<input type="radio" checked name="paymenttype" value="1">Use payment details as above
<br><input type="radio" name="paymenttype" value="2">I will phone you with payment details
<br><input type="radio" name="paymenttype" value="3">I will fax you payment details
<br><input type="radio" name="paymenttype" value="4">I will send a cheque/money order
<br><input type="radio" name="paymenttype" value="5">Cash on Delivery (COD)
</td>
<td>
<b>FOMS</b>
<br>PO Box 123
<br>Musicland
<br>Phone: 1800-998-FOMS
<br>Fax: 1800-999-FOMS
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<b>Items Selected</b>
</td>
</tr>
<tr>
<td width="50"> </td>
<td colspan="3">
<b>CDs</b>
</td>
</tr>
<tr>
<td> </td>
<td width="50"> </td>
<td width="300">
Mozart - Haydn - Gluck: Opera Arias & Von Otter / The English Concert / Pinnock
</td>
<td width="60" align="right">
$30.00
</td>
</tr>
<tr>
<td colspan="3">
<b>Total:</b>
</td>
<td align="right">
<b>$30.00</b>
</td>
</tr>
</table>
<input type="hidden" name="item1_productType" value="CDs">
<input type="hidden" name="item1_id" value="6">
<input type="hidden" name="item1_name" value="Mozart - Haydn - Gluck: Opera Arias & Von Otter / The English Concert / Pinnock">
<input type="hidden" name="item1_price" value="30.00">
</td>
</tr>
<tr>
<td align="center">
<br><input type="submit" value="Submit Order">
<input type="reset" value="Clear all Values">
<input type="button" value="Back to Catalogue" onClick="window.close();">
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
|
There's nothing particularly fancy here, just a standard HTML form. The list of items ordered is printed on this page using the printOrderTable function. Additionally, four hidden fields are created for each item ordered: itemn_productType, itemn_id, itemn_name and itemn_price.
If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome.
