JavaScript for E-Commerce

Back | Contents | Next
Please note that this tutorial was first published in the year 2000, and is based on work conducted between 1997 and 2000. While we trust that it still constitutes useful tutorial material, it should not necessarily be construed as to impart best practice in the year 2017. For more details please see this blog post.

Order Finalization - Modifications to index.html

We have replaced the dummy order method with code that generates the order finalization page.

Source

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\">&nbsp;</td><td colspan=\"3\">");
                doc.writeln("<b>" + productType + "</b></td></tr>");
                first=false;
            }
            doc.writeln("<tr><td>&nbsp;</td><td width=\"50\">&nbsp;</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>&nbsp;</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>
			

Description

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(\&quot;You MUST specify a valid email address.\&quot;);
        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.


Back | Contents | Next

This tutorial has been translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.

This tutorial has been translated to Slovak by Juraj Rehorovsky from Coupofy team.

If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome, either in Bitcoins to 19QpWDmZPmTqawcr8VsXcbdc4Znq1ecrza, or via PayPal.