[Javascript] doing totals of form values client side-examples - Solved
Jason Belanger
BELANGERJ at EM.AGR.CA
Wed Aug 22 13:16:14 CDT 2001
Hi Peter, I found out after words that it only worked in IE and nor Netscape. Here is the browser independent code for the whole page:
<html>
<head>
<title>Bulb order form</title>
</head>
<body>
<script language="JavaScript"><!--
function myopen(filename,windowname,properties) {
mywindow = window.open(filename,windowname,properties);
}
function maketotal() {
var itemA=document.bulb.A.selectedIndex * 25;
var itemB=document.bulb.B.selectedIndex * 8;
var itemC=document.bulb.C.selectedIndex * 8;
var itemD=document.bulb.D.selectedIndex * 10;
var itemE=document.bulb.E.selectedIndex * 10;
var itemF=document.bulb.F.selectedIndex * 10;
var itemG=document.bulb.G.selectedIndex * 10;
var itemH=document.bulb.H.selectedIndex * 8;
var itemI=document.bulb.I.selectedIndex * 8;
var itemJ=document.bulb.J.selectedIndex * 8;
var itemK=document.bulb.K.selectedIndex * 8;
var itemL=document.bulb.L.selectedIndex * 8;
var itemM=document.bulb.M.selectedIndex * 8;
var itemN=document.bulb.N.selectedIndex * 10;
var itemO=document.bulb.O.selectedIndex * 8;
var itemP=document.bulb.P.selectedIndex * 12;
var itemQ=document.bulb.Q.selectedIndex * 15;
var totalcost = (itemA + itemB + itemC + itemD + itemE + itemF + itemG + itemH + itemI + itemJ + itemK + itemL + itemM + itemN + itemO + itemP + itemQ)
document.bulb.TOTAL.value = totalcost;
}
//--></script>
<form name="bulb">
<table border="1" width="100%" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="left"></td>
<td valign="top" align="left"><b>Product Description</b></td>
<td valign="top" align="left"><b>Cost</b></td>
<td valign="top" align="left"><b>Quantity</b></td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('a.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/a.jpg" width="75" height="84" alt="60 Bulb Garden Assortment"></a></td>
<td valign="top" align="left">
<P><b>60 Bulb Garden Assortment</b><BR>
An assortment of all time favourite fall bulbs. Plant together or separately in mid to
late fall for a delightful array of colour and blooms throughout spring and early summer. Hardy in zones 3-8</p>
</td>
<td valign="top" align="left">$25.00</td>
<td valign="top" align="left">
<select size="1" name="A" tabindex="5" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('b.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/b.jpg" width="75" height="84" alt="6 Angelique Tulips"></a></td>
<td valign="top" align="left"><P><b>6 Angelique Tulips</b><BR>A double peony type tulip that
looks dainty but is extremely resilient. Among the last tulips
to bloom, usually in late May, 18-20* tall. hardy in zones 3-
8</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="B" tabindex="6" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('c.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/c.jpg" width="75" height="84" alt="6 Apricot Beauty Tulips"></a></td>
<td valign="top" align="left"><P><b>6 Apricot Beauty Tulips</b><BR>A best seller! This
Mayflowering light rosy-apricot beauty is excellent as a cut
flower, growing 15 - 18* tall. hardy in zones 3-8</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="C" onChange="maketotal()" tabindex="7">
<option value="">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('d.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/d.jpg" width="75" height="84" alt="20 Darwin Tulips"></a></td>
<td valign="top" align="left"><P><b>20 Darwin Tulips</b><BR>These giants of the Garden Tulips
will bloom year after year. Enjoy a mix of colours, from
bright reds and oranges to soft yellows. hardy in zones 3-8</p></td>
<td valign="top" align="left">$10.00</td>
<td valign="top" align="left">
<select size="1" name="D" tabindex="8" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('e.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/e.jpg" width="75" height="84" alt="12 Pastel Tulips"></a></td>
<td valign="top" align="left"><P><b>12 Pastel Tulips</b><BR>A mixture of mid-season tulips about
18 - 24* tall in beautiful pastel colours. Great as cut flowers!
hardy in zones 3-8</p></td>
<td valign="top" align="left">$10.00</td>
<td valign="top" align="left">
<select size="1" name="E" tabindex="9" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('f.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/f.jpg" width="75" height="84" alt="20 Giant Yellow Daffodils"></a></td>
<td valign="top" align="left"><P><b>20 Giant Yellow Daffodils</b><br>An outstanding value and
a great sign of spring! Perfect for naturalizing. hardy in zones
3-8</p>
</td>
<td valign="top" align="left">$10.00</td>
<td valign="top" align="left">
<select size="1" name="F" tabindex="10" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('g.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/g.jpg" width="75" height="84" alt="20 Mixed Daffodils"></a></td>
<td valign="top" align="left"><P><b>20 Mixed Daffodils</b><BR>We*ve chosen our best-selling daffodils
for this mixture. Use them for naturalizing or include in your
flower beds. They*ll surprise and delight you with their various
sizes, shapes and colours! hardy in zones 3-8</p></td>
<td valign="top" align="left">$10.00</td>
<td valign="top" align="left">
<select size="1" name="G" tabindex="11" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('h.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/h.jpg" width="75" height="84" alt="25 Glory of the Snow"></a></td>
<td valign="top" align="left"><P><b>25 Glory of the Snow</b><BR>(Chianodoxa forbessi) Petite
Lilac blue flowers are great interplanted with daffodils. Good
naturalizers! hardy in zones 3-8</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="H" tabindex="12" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('i.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/i.jpg" width="75" height="84" alt="6 Mixed Hyacinths"></a></td>
<td valign="top" align="left"><P><b>6 Mixed Hyacinths</b><BR>An excellent selection of mixed
colours and varieties that will add a wonderful fragrance to
your spring gardens! Growing 8 - 12* tall, blooming March
- April. Great for forcing! hardy in zones 4-9</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="I" tabindex="13" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('j.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/j.jpg" width="75" height="84" alt="25 Snow Crocus"></a></td>
<td valign="top" align="left"><P><b>25 Snow Crocus</b><BR>This delightful mix of crocus will be
the first flowers to greet you each spring! You*ll enjoy a
pleasant arrary of colours from soft lavender to glowing
yellow to deep violet; 4 - 6* tall blooming from Feb to March.
hardy in zones 3-9</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="J" tabindex="14" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('k.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/k.jpg" width="75" height="84" alt="35 Mixed Dutch Iris"></a></td>
<td valign="top" align="left"><P><b>35 Mixed Dutch Iris</b><BR>Carefully selected, graceful and
elegant mix of spectacular Dutch Iris. Colours range from
deep purple to creamy white, golden yellow and soft
blue/violet. Growing 24* tall and blooming May to June.
hardy in zones 4-9</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="K" tabindex="15" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('l.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/l.jpg" width="75" height="84" alt="25 Windflowers Mix"></a></td>
<td valign="top" align="left"><P><b>25 Windflowers Mix</b><BR>(Anemone blanda) Delightful
daisy-like flowers which produce blankets of flowers during*
April and May each year. Low growing (6* tall) and great
as naturalizers and for borders. hardy in zones 5-9</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="L" tabindex="16" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('m.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/m.jpg" width="75" height="84" alt="25 Grape Hyacinths"></a></td>
<td valign="top" align="left"><P><b>25 Grape Hyacinths</b><BR>(Muscari armeniacum) These
bright blue flowers are terrific interplanted with cheery
yellow and gold daffodils. You*ll get years of pleasure from
these delightful little flowers; 6 - 8* tall and blooming in
early April. hardy in zones 3-8</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="M" tabindex="17" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('n.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/n.jpg" width="75" height="84" alt="5 Asiatic Lilies"></a></td>
<td valign="top" align="left"><P><b>5 Asiatic Lilies</b><BR>A charming mix of easy-to-grow lilies
that will bring you year after year of beauty! All they need
is a sunny or partially sunny spot. Growing 30-60* tall with
terrific blossoms in June to July. hardy in zones 4-9</p></td>
<td valign="top" align="left">$10.00</td>
<td valign="top" align="left">
<select size="1" name="N" tabindex="18" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('o.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/o.jpg" width="75" height="84" alt="15 Spanish Blue Bells Mix"></a></td>
<td valign="top" align="left"><P><b>15 Spanish Blue Bells Mix</b><BR>(Scilla Hyacinthoides
hispanica) Bell shaped flower clusters of pink, white and red
on 15-18* stems. Ideal planted with daffodils, thrive in shady
spots and multiply each year. hardy in zones 4-9</p></td>
<td valign="top" align="left">$8.00</td>
<td valign="top" align="left">
<select size="1" name="O" tabindex="19" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('p.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/p.jpg" width="75" height="84" alt="Paperwhite Narcissus Kit"></a></td>
<td valign="top" align="left"><P><b>Paperwhite Narcissus Kit</b><BR>Bring the scent of spring
indoors this winter! This kit includes 4 Paperwhite Narcissus
bulbs, a white plastic pot and saucer, growing medium and
planting instructions. A perfect gift! indoor plant</p></td>
<td valign="top" align="left">$12.00</td>
<td valign="top" align="left">
<select size="1" name="P" tabindex="20" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"><a href="javascript:myopen('q.htm','windowName','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,width=181,height=200')">
<img border="0" src="IMAGES/q.jpg" width="75" height="84" alt="Red Lion Amaryllis Kit"></a></td>
<td valign="top" align="left"><P><b>Red Lion Amaryllis Kit</b><BR>This great gift kit includes 1
large Amaryllis bulb, a white plastic pot and saucer, growing
medium and instructions. Long lasting flowers; 18 - 24* tall.
indoor plant</p></td>
<td valign="top" align="left">$15.00</td>
<td valign="top" align="left">
<select size="1" name="Q" tabindex="21" onChange="maketotal()">
<option value="0">0</option>
<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>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="left"> </td>
<td valign="top" align="left"> </td>
<td valign="top" align="left"><b>Total Cost</b>
</td>
<td valign="top" align="left"><input type="text" name="TOTAL" size="20" tabindex="22"></td>r=no,
</tr>
</table>
<p align="left"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
<p align="left"></p>
</form>
<hr>
</body>
</html>
Jason Belanger
Web Technologies System Specialist
(613) 759-7809
belangerj at em.agr.ca
http://www.agr.ca/
More information about the Javascript
mailing list