Table Calculations
Modify the 4th column of each row to run a JavaScript using the onBlur event.
Build a JavaScript function
tallyRow()
that will multiply the
Price
times the
Quantity
as the user executes a mouse-out (onBlur) event
Pass the results of the calculation to the 5th column of each row durring the onBlur event.
Add a calculate button at the bottom of the page for browsers that do not hadle the onBlur event.
Originals and Lithographs
Item #
Description
Price $
Quantity
Row Total $
100001
The Dragon
100002
Hush Little Ones
100003
A Monster, A Mouse, The Princess and Me
100004
Laura's Song
100005
The Christmas Bear of Baffin Bay
100006
Boxes and Bows
Total
The Code
function tallyRow() { z=document.orderform.countTtl.value; // hidden value of db recordset count //alert(z) // use for testing x=0;y=0;Cost=0;Total=0;ttlQuant=0; // Globals for (i=1;i<=z;i++) // loop through rows { // Use Eval function to dynamically build the column name x=eval("document.orderform.quantity_"+ i +".value"); // x is quantity y=eval("document.orderform.price_"+ i +".value"); // y is price Cost = (x*y); // simple calcualtion document.getElementById("row_ttl_" + i ).value = Cost.toFixed(2); } //Pass value of calculation back as 2 decimal value - use __.toFixed(2) function } . . . H T M L . . . <form name="orderform" id="orderform" method="get"> <input type="hidden" id="countTtl" name="countTtl" value="6"> <table class="tbl_1" width=95%> <tr> <th colspan=5 > Originals and Lithographs </th> </tr> <tr> <td style="width:50px;"> Item # </td> <td style="width:250px;"> Description </td> <td style="width:50px;"> Price $ </td> <td style="width:50px;"> Quantity </td> <td style="width:100px;"> Row Total $ </td> </tr> <tr> <td > 100001 </td> <td > The Dragon </td> <td > <input type="text" class="price_ttl_1" name="price_1" id="price_1" value="500.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_1" id="quantity_1" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_1" name="row_ttl_1" id="row_ttl_1" value="0.00" readonly="true" /> </td> </tr> <tr> <td > 100002 </td> <td > Hush Little Ones </td> <td > <input type="text" class="price_ttl_2" name="price_2" id="price_2" value="600.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_2" id="quantity_2" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_2" name="row_ttl_2" id="row_ttl_2" value="0.00" readonly="true" /> </td> </tr> <tr> <td > 100003 </td> <td > A Monster, A Mouse, The Princess and Me </td> <td > <input type="text" class="price_ttl_1" name="price_3" id="price_3" value="450.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_3" id="quantity_3" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_1" name="row_ttl_3" id="row_ttl_3" value="0.00" readonly="true" /> </td> </tr> <tr> <td > 100004 </td> <td > Laura's Song </td> <td > <input type="text" class="price_ttl_2" name="price_4" id="price_4" value="300.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_4" id="quantity_4" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_2" name="row_ttl_4" id="row_ttl_4" value="0.00" readonly="true" /> </td> </tr> <tr> <td > 100005 </td> <td > The Christmas Bear of Baffin Bay </td> <td > <input type="text" class="price_ttl_1" name="price_5" id="price_5" value="650.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_5" id="quantity_5" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_1" name="row_ttl_5" id="row_ttl_5" value="0.00" readonly="true" /> </td> </tr> <tr> <td > 100006 </td> <td > Boxes and Bows </td> <td > <input type="text" class="price_ttl_2" name="price_6" id="price_6" value="700.00" readonly="true" /> </td> <td > <input type="text" class="" name="quantity_6" id="quantity_6" value="" size="3" onblur="tallyRow();" /> </td> <td > <input type="text" class="price_ttl_2" name="row_ttl_6" id="row_ttl_6" value="0.00" readonly="true" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Recalculate" onclick="tallyRow();"> <input type="button" value="Submit" onclick="popup1();"> <input type="reset" > </td> <td colspan=2 align=right> Total </td> <td class="td_0"> <input type="text" class="ttl" name="Total" id="Total" value="0.00" readonly="true" /> </td> </tr> </table> </form>
Back
Lectures
Next