Pfthb

I have a pricing table which contains some variables that depend on a dropdown list selection. The JSFIDDLE shows the desired outcome.

The desired outcome is dependable on the drop-down selection. As a selection is picked, then the following changes should take place in the table:

1. The "Item Cost" should display the price selected.


2. The "Total" price should be multiplied by the "Qty." to display the total shipping cost.


3. The grand "Total" should be the sum of the total column that includes Product + Shipping Costs.

Here's the dropdown options:

<div class="input-group full-width">
 <span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
 <select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
 <option value="" selected="">Selet a Shipping Method</option>
 <option value="2.95">US Mail - $2.95</option>
 <option value="3.50">Priority Mail - $3.50</option>
 <option value="4.67">Fedex - $4.67</option>
 </select>
</div>

The table is as follows:

<table id="product-list">
 <thead>
 <tr>
 <th class="text-left">Item</th>
 <th class="text-center">Qty.</th>
 <th class="text-center">Item Cost</th>
 <th class="text-center">Tax</th>
 <th class="text-right">Total</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr>
 <td>Product Name</td>
 <td class="qty">2</td>
 <td class="item-cost">$10.00</td>
 <td class="tax">$0.68</td>
 <td class="total">$10.68</td>
 </tr>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr>
 <td>Shipping Cost</td>
 <td class="qty red">1</td>
 <td class="item-cost red">$2.95</td>
 <td class="tax">$0.00</td>
 <td class="total red">$5.90</td>
 </tr>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr id="product-totals">
 <td colspan="4"></td>
 <td class="total red">$13.02</td>
 </tr>
 </tbody>
</table>

I would appreciate any help I can get regarding this scenario and if you can show on a jsfiddle it would be even better. Thanks.

Here is an example you may consider. Since you are not familiar with JavaScript, and by proxy jQuery, the answer may not help you much.

Working Example: http://jsfiddle.net/Twisty/tn3kd04o/23/

HTML

<form id="ReviewShippingAndPayment" name="ReviewShippingAndPayment" method="post" action="/Distributor/Shop/Product-List">
 <div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
 <div class="pl8 bbcustom p0">
 <h2 class="page-header"><i class="fa fa-cube pr8 hidden-sm hidden-xs"></i>Shipping Method Selection</h2>
 <p>
 The desired outcome is driven by the "<span class="fw6">Select a Shipping Method</span>" dropdown.<br /><br />When a shipping method is selected, then the "Item Cost" should be multiplied by the "Qty." and displayed in the Shipping Cost Total
 column.
 <br /><br />Such selection should also update the final cost that include the Product Cost + Total Shipping.
 </p>
 <span class="spacer"></span>
 </div>
 <div class="spacer"></div>
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
 <div class="shipping-method-container">
 <div class="field-wrapper">
 <div class="input-group full-width">
 <span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
 <select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
 <option value="" selected="">Selet a Shipping Method</option>
 <option value="2.95">US Mail - $2.95</option>
 <option value="3.50">Priority Mail - $3.50</option>
 <option value="4.67">Fedex - $4.67</option>
 </select>
 </div>
 </div>
 <span class="help-block"></span>
 </div>
 <div class="clearfix"></div>
 <hr style="margim:0px;padding:0;" />
 <div class="clearfix"></div>
 <table id="product-list">
 <thead>
 <tr>
 <th class="text-left">Item</th>
 <th class="text-center">Qty.</th>
 <th class="text-center">Item Cost</th>
 <th class="text-center">Tax</th>
 <th class="text-right">Total</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr class="prod-row">
 <td>Product Name</td>
 <td class="qty">1</td>
 <td class="item-cost">$10.00</td>
 <td class="tax">$0.68</td>
 <td class="total">$10.68</td>
 </tr>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr class="ship-row">
 <td>Shipping Cost</td>
 <td class="qty red">1</td>
 <td class="item-cost red">$2.95</td>
 <td class="tax">$0.00</td>
 <td class="total red">$5.90</td>
 </tr>
 <tr>
 <td colspan="5" class="pt5"></td>
 </tr>
 <tr id="product-totals">
 <td colspan="4"></td>
 <td class="total red">$13.02</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
</form>

Some minor changes to the HTML so that it's easier to address.

JavaScript

$(function() 
 function calcTotal() 
 var p = 
 qty: parseInt($(".prod-row .qty").text().trim()),
 tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
 price: parseFloat($(".prod-row .item-cost").text().trim().slice(1))
 ;
 var s = 
 qty: parseInt($(".ship-row .qty").text().trim()),
 tax: parseFloat($(".ship-row .tax").text().trim().slice(1)),
 price: parseFloat($(".ship-row .item-cost").text().trim().slice(1))
 
 var t = 0.00;
 if (p && s) 
 t = (p.qty * p.price + p.tax) + (s.qty * s.price + s.tax);
 
 console.log(p, s, t);
 return t;
 
 $("#shippingmethod").change(function(e) 
 var shipQty = parseInt($(".ship-row .qty").text());
 var shipCost = parseFloat($(this).val());
 $(".ship-row .item-cost").html("$" + shipCost.toFixed(2));
 $(".ship-row .total").html("$" + (shipQty * shipCost).toFixed(2));
 var total = calcTotal();
 $("#product-totals .total").html("$" + total.toFixed(2));
 );
);

When the drop down is changed, the change event callback is triggered. We collect a few details and then perform some basic math functions.

Hope that helps.