JavaScript Input Example 3

Description:
The JavaScript on this page demonstrates how to utilize the "addProduct()" method to add an item to the shopping cart whenever an image is clicked. It also demonstrates how to use a form, a selection list, and a text box to allow the customer to choose from available options and specify the desired quantity.

Example:


Flavor: Qty:

Source:
<SCRIPT LANGUAGE="Javascript">
function addP00003()
{
document.uShopJSI.addProduct(
"P00003",                          <!-- Product ID -->
"Lolly Pop",                       <!-- Product Name -->
"" +                               <!-- Product Description and Option -->
document.P00003.flavor.options[document.P00003.flavor.selectedIndex].value,
"0.1",                             <!-- Product Weight -->
document.P00003.quantity.value,    <!-- Product Quantity -->
"$0.75",                           <!-- Product Price (Each) -->
"$0.00",                           <!-- Extra Price Modifiers -->
"$0.00",                           <!-- Product Classification -->
"$0.00",                           <!-- Product Shipping Modifier -->
"YES");                            <!-- Taxable? -->
}
</SCRIPT>

<FORM NAME="P00003">
Flavor:
<SELECT NAME="flavor">
   <OPTION VALUE="Orange">Orange</OPTION>
   <OPTION VALUE="Cherry">Cherry</OPTION>
   <OPTION VALUE="Grape">Grape</OPTION>
   <OPTION VALUE="Lemon">Lemon</OPTION>
   <OPTION VALUE="Strawberry">Strawberry</OPTION>
</SELECT>
Qty:
<INPUT TYPE=text SIZE=4 NAME="quantity" VALUE="1">
<A HREF="" onClick="addP00003();return false;">
<IMG SRC="../images/example_add_button.gif" border=0 align=TOP></A>
</FORM>

Note: Don't forget to add the uShopJSI applet to your page too:
<APPLET CODE="uShopJSI.class" CODEBASE="../classes/" NAME="uShopJSI" WIDTH="2" HEIGHT="2">
</APPLET>

More Information:

For more information about creating and using your own JavaScripts with uShop, see uShop and Java Scripts.