- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>jQuery</title>
- <link rel="stylesheet" type="text/css" href="style.css" />
- <script src="http://www.google.com/jsapi" type="text/javascript"></script>
- <script type="text/javascript">
- google.load("jquery", "1.2.6");
- </script>
- <script type="text/javascript" src="order.js"></script>
- </head>
- <body>
- <table id="order-table">
- <tr>
- <th>Product Name</th>
- <th>Quantity</th>
- <th>X</th>
- <th>Unit Price</th>
- <th>=</th>
- <th style="text-align: right;">Totals</th>
- </tr>
- <tr class="odd">
- <td class="product-title">www.corange.cn<em></em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets" >
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>340</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="even">
- <td class="product-title"><p>Turface® Pro League Red - <em>Calcined Clay Top Dressinged</em></p>
- <p> </p></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets">
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>455</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="odd">
- <td class="product-title">Turface® Quick Dry - <em>Calcined Clay Moisture Absorbent</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets" >
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>100</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="even">
- <td class="product-title">Turface® Mound Clay Red - <em>Virgin Red Clay</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets">
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>40</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="odd">
- <td class="product-title">Red Infield Conditioner - <em>Vitrified Clay Top Dressing</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets" >
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>35</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="even">
- <td class="product-title">Drying Agent - <em>Calcined Clay Moisture Absorbent</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets">
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>340</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="odd">
- <td class="product-title">Professional - <em>Calcined Clay Top Dressing</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets" >
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>75</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr class="even">
- <td class="product-title">Top Dressing - <em>Calcined Clay Soil Conditioner</em></td>
- <td class="num-pallets">
- <input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets">
- </input>
- </td>
- <td class="times">X</td>
- <td class="price-per-pallet">$<span>30</span></td>
- <td class="equals">=</td>
- <td class="row-total">
- <input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled">
- </input>
- </td>
- </tr>
- <tr>
- <td colspan="6" style="text-align: right;"> Product SUBTOTAL:
- <input type="text" class="total-box" id="product-subtotal" disabled="disabled">
- </input>
- </td>
- </tr>
- </table>
- </body>
- </html>
- function IsNumeric(sText)
- {
- var ValidChars = "0123456789.";
- var IsNumber=true;
- var Char;
- for (i = 0; i < sText.length && IsNumber == true; i++)
- {
- Char = sText.charAt(i);
- if (ValidChars.indexOf(Char) == -1)
- {
- IsNumber = false;
- }
- }
- return IsNumber;
- };
- function calcProdSubTotal() {
- var prodSubTotal = 0;
- $(".row-total-input").each(function(){
- var valString = $(this).val() || 0;
- prodSubTotal += parseInt(valString);
- });
- $("#product-subtotal").val(prodSubTotal);
- };
- function calcTotalPallets() {
- var totalPallets = 0;
- $(".num-pallets-input").each(function() {
- var thisValue = $(this).val();
- if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
- totalPallets += parseInt(thisValue);
- };
- });
- $("#total-pallets-input").val(totalPallets);
- };
- function calcShippingTotal() {
- var totalPallets = $("#total-pallets-input").val() || 0;
- var shippingRate = $("#shipping-rate").text() || 0;
- var shippingTotal = totalPallets * shippingRate;
- $("#shipping-subtotal").val(shippingTotal);
- };
- function calcOrderTotal() {
- var orderTotal = 0;
- var productSubtotal = $("#product-subtotal").val() || 0;
- var shippingSubtotal = $("#shipping-subtotal").val() || 0;
- var orderTotal = parseInt(productSubtotal) + parseInt(shippingSubtotal);
- var orderTotalNice = "$" + orderTotal;
- $("#order-total").val(orderTotalNice);
- };
- $(function(){
- $('.num-pallets-input').blur(function(){
- var $this = $(this);
- var numPallets = $this.val();
- var multiplier = $this
- .parent().parent()
- .find("td.price-per-pallet span")
- .text();
- if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
- var rowTotal = numPallets * multiplier;
- $this
- .css("background-color", "white")
- .parent().parent()
- .find("td.row-total input")
- .val(rowTotal);
- } else {
- $this.css("background-color", "#ffdcdc");
- };
- calcProdSubTotal();
- calcTotalPallets();
- calcShippingTotal();
- calcOrderTotal();
- });
- });
- myorder.zip (2.5 KB)