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.

The Ordering Process - Modifications to item-cd-blues.html, ...

We have added some JavaScript code and an HTML form containing checkboxes next to each item name to the item-cd-blues.html, item-cd-dance.html, ..., item-record-classical.html files.

When the customer wants to add an item to the list of items they are going to order, they check the checkbox next to the item's name. If they wish to remove the item from the list, they uncheck the checkbox.

Source

New or modified code is displayed in bold text.

<html>

<head>

<base target="contentFrame">

<script language="JavaScript">

function orderItem(checked, id, name, price) {
    if(checked) {
        top.myOrderList.addItem("CDs", id, name, price);
    } else {
        top.myOrderList.removeItem(id);
    }
}

top.myOrderList.itemsVisible = true;

</script>

</head>

<body onLoad="top.myOrderList.checkItems();">

<form name="itemForm">

<table border="0" cellpadding="1" cellspacing="1">
    <tr>
        <td><input type="checkbox" name="Item11"
        onClick="orderItem(this.checked, 11, 'Led Zeppelin - Remasters', '30.00');">&nbsp;</td>
        <td><a href="item-0011.html">Led Zeppelin - Remasters</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="Item1"
        onClick="orderItem(this.checked, 1, 'Penyon - Some People', '10.00');">&nbsp;</td>
        <td><a href="item-0001.html">Penyon - Some People</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="Item12"
        onClick="orderItem(this.checked, 12, 'The Sisters Of Mercy - Vision Thing', '30.00');">&nbsp;</td>
        <td><a href="item-0012.html">The Sisters Of Mercy - Vision Thing</a></td>
    </tr>
</table>

</form>

</body>

</html>
			

Description

Only the source of item-cd-rock.html is listed here.

A checkbox has been inserted to the left of each item. When the user checks or unchecks it, the orderItem function is called. This function calls either the addItem or removeItem method of the myOrderList object, depending on whether the checkbox is being checked or unchecked.

When this file is loaded, the myOrderList.itemsVisible flag is set to true, indicating that a list of items is being displayed. Additionally, the myOrderList.checkItems() method is called to check the checkboxes next to any items that have already been selected.

myOrderList.itemsVisible and myOrderList.checkItems() are discussed in greater detail the next section.

There are a number of things worth noting about this file:


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.