JavaScript Input Example 5

Description:
The JavaScript on this page demonstrates how JavaScripts make it possible to easily create custom layouts and perform custom calculations.

Example:


Arrival Date:
Number Of Nights:
Number Of Rooms:
Number Of Adults:

Source:
<SCRIPT LANGUAGE="Javascript">
function addP00005()
{
var month = document.P00005.month.options[document.P00005.month.selectedIndex].value;
var day = document.P00005.day.options[document.P00005.day.selectedIndex].value;
var year = document.P00005.year.options[document.P00005.year.selectedIndex].value;
var numNights = document.P00005.nights.options[document.P00005.nights.selectedIndex].value;
var numRooms = document.P00005.rooms.options[document.P00005.rooms.selectedIndex].value;
var numAdults = document.P00005.adults.options[document.P00005.adults.selectedIndex].value;

document.uShopJSI.addProduct(
"P00005",                          <!-- Product ID -->
"Motel 10",                        <!-- Product Name -->
"" +                               <!-- Product Description and Options -->
"Arrival Date:" + month + "-" + day + "-" + year + 
" Nights:" + numNights +
" Rooms:" + numRooms +
" Adults:" + numAdults,
"0",                               <!-- Product Weight -->
(numNights * numRooms),            <!-- Product Quantity -->
"$90.00",                          <!-- Product Price (Each) -->
"$0.00",                           <!-- Extra Price Modifiers -->
"$0.00",                           <!-- Product Classification -->
"$0.00",                           <!-- Product Shipping Modifier -->
"YES");                            <!-- Taxable? -->
}
</SCRIPT>

<FORM NAME="P00005">
<TABLE BORDER=1 CELLPADDING=3>
<TR>
<TD>
<TABLE BORDER=0>
<TR>
<TD ALIGN=RIGHT>
Arrival Date:
</TD>
<TD>
<SELECT NAME="month">
   <OPTION VALUE="JAN">JAN</OPTION>
   <OPTION VALUE="FEB">FEB</OPTION>
   <OPTION VALUE="MAR">MAR</OPTION>
   <OPTION VALUE="APR">APR</OPTION>
   <OPTION VALUE="MAY">MAY</OPTION>
   <OPTION VALUE="JUN">JUN</OPTION>
   <OPTION VALUE="JUL">JUL</OPTION>
   <OPTION VALUE="AUG">AUG</OPTION>
   <OPTION VALUE="SEP">SEP</OPTION>
   <OPTION VALUE="OCT">OCT</OPTION>
   <OPTION VALUE="NOV">NOV</OPTION>
   <OPTION VALUE="DEC">DEC</OPTION>
</SELECT>
<SELECT NAME="day">
   <OPTION VALUE="01">01</OPTION>
   <OPTION VALUE="02">02</OPTION>
   <OPTION VALUE="03">03</OPTION>
   <OPTION VALUE="04">04</OPTION>
   <OPTION VALUE="05">05</OPTION>
   <OPTION VALUE="06">06</OPTION>
   <OPTION VALUE="07">07</OPTION>
   <OPTION VALUE="08">08</OPTION>
   <OPTION VALUE="09">09</OPTION>
   <OPTION VALUE="10">10</OPTION>
   <OPTION VALUE="11">11</OPTION>
   <OPTION VALUE="12">12</OPTION>
   <OPTION VALUE="13">13</OPTION>
   <OPTION VALUE="14">14</OPTION>
   <OPTION VALUE="15">15</OPTION>
   <OPTION VALUE="16">16</OPTION>
   <OPTION VALUE="17">17</OPTION>
   <OPTION VALUE="18">18</OPTION>
   <OPTION VALUE="19">19</OPTION>
   <OPTION VALUE="20">20</OPTION>
   <OPTION VALUE="21">21</OPTION>
   <OPTION VALUE="22">22</OPTION>
   <OPTION VALUE="23">23</OPTION>
   <OPTION VALUE="24">24</OPTION>
   <OPTION VALUE="25">25</OPTION>
   <OPTION VALUE="26">26</OPTION>
   <OPTION VALUE="27">27</OPTION>
   <OPTION VALUE="28">28</OPTION>
   <OPTION VALUE="29">29</OPTION>
   <OPTION VALUE="30">30</OPTION>
   <OPTION VALUE="31">31</OPTION>
</SELECT>
<SELECT NAME="year">
   <OPTION VALUE="2000">2000</OPTION>
   <OPTION VALUE="2001">2001</OPTION>
   <OPTION VALUE="2002">2002</OPTION>
   <OPTION VALUE="2003">2003</OPTION>
   <OPTION VALUE="2004">2004</OPTION>
   <OPTION VALUE="2005">2005</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Number Of Nights:
</TD>
<TD>
<SELECT NAME="nights">
   <OPTION VALUE="1">1</OPTION>
   <OPTION VALUE="2">2</OPTION>
   <OPTION VALUE="3">3</OPTION>
   <OPTION VALUE="4">4</OPTION>
   <OPTION VALUE="5">5</OPTION>
   <OPTION VALUE="6">6</OPTION>
   <OPTION VALUE="7">7</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Number Of Rooms:
</TD>
<TD>
<SELECT NAME="rooms">
   <OPTION VALUE="1">1</OPTION>
   <OPTION VALUE="2">2</OPTION>
   <OPTION VALUE="3">3</OPTION>
   <OPTION VALUE="4">4</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Number Of Adults:
</TD>
<TD>
<SELECT NAME="adults">
   <OPTION VALUE="1">1</OPTION>
   <OPTION VALUE="2">2</OPTION>
   <OPTION VALUE="3">3</OPTION>
   <OPTION VALUE="4">4</OPTION>
   <OPTION VALUE="5">5</OPTION>
   <OPTION VALUE="6">6</OPTION>
   <OPTION VALUE="7">7</OPTION>
   <OPTION VALUE="8">8</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=RIGHT>
<INPUT TYPE=button VALUE="Add To Cart" onClick="addP00005();">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</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.