A5-Product Selector

2220


Overview

Develop a primitive catalog page that allows the user to select an item's product number and as a result displays in a text area the item number, item name, item description, and item price, accompanied by an image of the item.  The items are featured on the University Bookstore site.   Your web page should include a drop-down box for item selection, a button to initiate the processing, and a text area and image for output.  


Form Details

Use a drop down list (select box) in which to display the sorted item number list.  Refer to the form field help page for drop down lists for help populating the drop down list.

Use a command button labeled "Find Item" to actually perform the item lookup.  

Use a text area to display the product data.

Use an image to display the product image. 

Your form should look as much as possible like the following.  The first image is before a user selection, and the second is following a user selection.

.


.


Structure

The structure of this program follows the normal pattern, consisting of the following:

  • Declarations
  • Initialization
  • Input
  • Processing 
  • Output

The onload event of the body tag calls the populateList function to initialize the productNameSorted array and then use its contents to populate the drop down box.

The click event of the Find Item button invokes the findItem function, which is the main function or dispatcher.  This function calls specialized functions to perform initialization, input, processing and output.

  • The arrays are initialized by the function initializeArrays (with the exception of productNameSorted).
  • Input is performed by the function getListText, which reads the text portion of the selected item.

  • Processing is done by the searchArray function.

  • Output is done by the showProductDetails function, which is the last action performed by the findItem function.


Functions

The following table provides a description of the functions that you should use.  Note that the chosen function names clearly describe the purpose of the functions. 

Function Name

Explanation

populateList   

Populates the productNameSorted array and then loops through it, using the items in the array to populate the designated list box.

findItem   

Calls the following four functions to perform initialization-input-processing-output.

initializeArrays   

Populates (initializes) the product detail parallel arrays (productName, productNum, productDescription, productPrice, and productImage). 

getListText   

Given a list box, finds the index of the selected item using the selectedIndex method. Uses that index to get the text of the selected item using the text property and return it.

searchArray   

Loops through the productName array until it locates the search phrase, at which point it returns the index of the found item.

showProductDetails   

Accepts the index of the found item and uses it to access the parallel arrays (productNumproductDescription, productPrice, and productImage) to get the corresponding product details, which it then outputs.


Processing

When the form is loaded the populateList function is invoked [declaration:  populateList(selectBox)].  It declares and initializes the productNameSorted array and then uses its contents to populate the drop down box.  Refer to the form field help page for drop down lists for help populating the drop down list.

When the "Find Item" button is clicked the findItem function is called [declaration: findItem(selectBox)]. It declares the parallel arrays and then calls initializeArrays to populate the parallel arrays with product details.  Then it calls getListText to get the text of the item selected in the list box.  It then calls searchArray, which locates the search phrase, at which point it returns the index of the found item.  It then calls showProductDetails to retrieve the corresponding product details from the parallel arrays and displays them in the specified output field.

  • As noted above, initializeArrays(productNum, productName, productDescription, productPrice, productImage) populates the parallel arrays (productNum, productName, productDescription, productPrice, and productImage) with product details.

  • getListText(selectBox) gets the text of the item selected in the list box and returns it to the calling routine.  Refer to the form field help page for drop down lists for help reading test from the drop down list.

  • searchArray(arrayName, searchPhrase) should use a while loop to locate the search phrase, at which point it returns the index of the found item.  Do not use indexOf to search through the array.  Instead, write your own search using a while loop like the one shown here.

  • showProductDetails(selectedIndex, productNum, productName, productDescription, productPrice, productImage) accepts the index of the found item and uses it to retrieve the corresponding product details from the parallel arrays and displays them in the specified output field.  An error is displayed if no matching product was found.


Documentation

Be sure that you code is documented thoroughly.  In all programs you should include a comment block at the beginning or your program with your name, date, the assignment number, and a brief description of the purpose of the program.  Comment blocks should be demarcated with lines before and after the block, as in the sample programs.

Each function should be prefaced by a comment block indicating its purpose.

You should use good variable and function names, sometimes referred to as self-documenting code.

You should embed comments in your code whenever the purpose of subsequent lines may be unclear to subsequent reviewers. 


Hints

A video of how this program should function is included here (downloads slowly).

If you need an explanation of parallel arrays, see this link.

Be sure to use sortedProductName array to populate the drop down box.  It is sorted differently than the other arrays to force you to do a search to find the matching product name when the button is pressed.

Do not use indexOf to search through the array.  Instead, write your own search using a while loop like the one shown here.

In order to prevent the user from clicking the button without making a selection in the drop down box, you should initially disable the Find Item button by including disabled="disabled" somewhere in the button html. 

<input id="find" type="button" value="Find Item" disabled="disabled" ....

Then, in the onchange event of the drop down box you can call the enableButton function provided below to enable the button.

function enableButton(buttonId)
{

   alert("working on " +buttonId );
   document.getElementById(buttonId).disabled=false;
}

Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.

Refer to the grading rubric for grading details.

Note that I am aware that this assignment would be more efficient if it used multidimensional arrays or arrays of objects, but you need to use parallel arrays to get the maximum credit for the assignment because the one dimensional array is the topic being reinforced.


Data

Here is the data for your arrays: Link