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.

Framework - product.html

The product.html file includes a drop down list where the user can select the desired product type.

Source

<html>

<head>

<script>
<!--
function selectProduct() {
    var e = document.productForm.selProduct;
    parent.categoryFrame.location = e.options[e.selectedIndex].value;
    parent.itemFrame.location = "item-initial";
}
//-->
</script>

</head>

<body>

<form name="productForm">

<font size="-1">Product:<br></font>

<select name="selProduct" onChange="selectProduct();">
    <option value="cat-cd.html">CDs</option>
    <option value="cat-record.html">Records</option>
    <option value="cat-tape.html">Tapes</option>
</select>

</form>

</body>

</html>
			

Description

The drop down list defined here has three options labelled "CDs", "Records" and "Tapes".

When the user selects a new product type, the function selectProduct is called. This function loads the HTML file specified by the value of the selected option into the category frame. The item-initial.html file is then loaded into the item frame.


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.