troubleshooting Question

Integrating new functionality into existing javascript calculations on order form

Avatar of saabStory
saabStoryFlag for United States of America asked on
JavaScriptjQuery
3 Comments1 Solution108 ViewsLast Modified:
I've got a form that is used for ordering t-shirts. Different sizes, different prices, tax, total are all good. Up to now, we've only offered in-store pick up but now, they want to add home delivery for a small fee.

On the form, the delivery fees are initially hidden. If someone selects delivery, the delivery total fades in and shows $4. Click back on store pickup and delivery option fades out and the amount changes back to 0.

I need help with integrating that into the grand total calculation so that clicking on delivery adds $4 and clicking on store pickup removes it if the delivery option was selected or does nothing if it isn't. And do it in such a way that it works with the key-up events of the order fields.

I could really use some help with this as we're trying to get this launched before the holidays.  Many thanks in advance.

I've got a fiddle showing what it's currently doing - and the code below:

jsfiddle.net/saabStory/936wkx7v/6/

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta http-equiv="Expires" content="Tue, 01 Jan 1995 12:12:12 GMT">
        <meta http-equiv="Pragma" content="no-cache">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <style type="text/css">
            div.errorContainer {font-weight:normal !important;color:#c00;font-size:.95em;padding:2px 0 0 0;}
            table.orderTable td input {width:50px;margin-right:10px;}
            table.orderTable td label {width:150px;}
            .totalWrapper {width:250px;margin-bottom: 20px;overflow:auto;}
            .wrapper div:nth-child(1) {width:150px;text-align:right;float:left;margin:0 0 5px 0;}
            .wrapper div:nth-child(2) {width:75px;text-align:left;float:right;margin:0 0 5px 20px;}
        </style>
    </head>
    <body>

        <div><label for="shop"><input type="radio" name="pickup" id="shop" style="margin-right:8px;" tabindex="10">Pick up my order</label></div>
        <div><label for="deliver"><input type="radio" name="pickup" id="deliver" style="margin-right:8px; " tabindex="10">Deliver to my home for an additional $4.00</label></div>
        <br>
        <table cellspacing="0" cellpadding="0" class="orderTable">
            <tbody>
            <tr>
                <td><input type="text" name="orderS" id="orderS" class="su1 key-numeric" value="" maxlength="3" tabindex="2"></td>
                <td><label for="orderS">Small <span>($13.00 + tax)</span></label></td>
            </tr>
            <tr>
                <td><input type="text" name="orderM" id="orderM" class="su2 key-numeric" value="" maxlength="3" tabindex="3"></td>
                <td><label for="orderM">Medium <span>($15.50 + tax)</span></label></td>
            </tr>
            </tbody>
        </table>
        <br>
        <br>
        <div class="totalWrapper">
            <div id="subTotalWrapper" class="wrapper">
                <div><strong>Sub-Total:</strong></div>
                <div id="orderSubTotalText" class="orderSubTotal">$0.00</div>
            </div>
            <div id="taxTotalWrapper" class="wrapper">
                <div><strong>Tax:</strong></div>
                <div id="orderTaxText" class="succTShirtOrderTotal">$0.00</div>
            </div>
            <div id="orderDeliveryWrapper" class="wrapper" style="display:none;">
                <div><strong>Delivery:</strong></div>
                <div id="orderDeliveryText" class="succTShirtOrderTotal">$4.00</div>
            </div>
            <div id="grandTotalWrapper" class="wrapper">
                <div><strong>Total to be Charged:</strong></div>
                <div id="orderGrandTotalText" class="succTShirtOrderTotal">$0.00</div>
            </div>
        </div>
        <input type="text" name="orderSubTotalTemp" id="orderSubTotalTemp" value="0.00" placeholder="Sub Total Temp" tabindex="-1"><br>
        <input type="text" name="orderTaxTemp" id="orderTaxTemp" value="0.00" placeholder="Tax Temp" tabindex="-1"><br>
        <input type="text" name="orderDeliveryTemp" id="orderDeliveryTemp" value="0.00" placeholder="Delivery Temp" tabindex="-1"><br>
        <input type="text" name="orderGrandTotalTemp" id="orderGrandTotalTemp" value="0.00" placeholder="Grand Total Temp" tabindex="-1"><br>
        <input type="text" name="orderSTemp" id="orderSTemp" value="0" placeholder="Order Adult S" tabindex="-1"><br>
        <input type="text" name="orderMTemp" id="orderMTemp" value="0" placeholder="Order Adult M" tabindex="-1"><br>
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" ></script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
        <script type='text/javascript'>
            $('.key-numeric').keypress(function(e) {
                var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
                if (verified) {e.preventDefault();}
            });
            $('#shop').click(function(){
                $("#orderDeliveryWrapper").fadeOut(250);
                $("#orderDeliveryTemp").val("0");
            });
            $('#deliver').click(function(){
                $("#orderDeliveryWrapper").fadeIn(750);
                $("#orderDeliveryTemp").val('4.00');
            });
            $('#orderS').keyup(function(){
                $("#orderSTemp").val($('#orderS').val());
            });
            $('#orderM').keyup(function(){
                $("#orderMTemp").val($('#orderM').val());
            });
            $(".su1").each(function(){
                $(this).keyup(function(){
                    calculateOrderSum();
                });
            });
            $(".su2").each(function(){
                $(this).keyup(function(){
                    calculateOrderSum();
                });
            });


            function calculateOrderSum() {
                // alert('here');
                var sum = 0;
                var sum2 = 0;
                var price = 0;
                var orderSubTotal = 0;
                var orderTax = 0;
                var orderDelivery = 0;
                // var orderGrandTotal = 0;
                var orderTotalNum = 0;
                var orderTotalText = '';
                var orderS = Number($('#orderS').val());
                var orderM = Number($('#orderM').val());
                orderTotalNum = orderS + orderM;
                $("#orderTotal").val(orderTotalNum);

                price = 13;
                $(".su1").each(function () {
                    if (!isNaN(this.value.replace(/\,/g, '')) && this.value.length != 0) {
                        sum += parseFloat(price*(this.value).replace(/\,/g, ''));
                    }
                });
                price = 15.5;
                $(".su2").each(function () {
                    if (!isNaN(this.value.replace(/\,/g, '')) && this.value.length != 0) {
                        sum2 += parseFloat(price*(this.value).replace(/\,/g, ''));
                    }
                });

                //= CALCULATE TOTALS FOR ORDER ========================================================================================================================================
                orderSubTotal = (sum + sum2).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                orderTax = ((sum + sum2) *.0825).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                orderGrandTotal = Number(orderSubTotal.replace(/\,/g,'')) + Number(orderTax.replace(/\,/g,''));
                //= DISPLAY ORDER VALUES IN FORM AS HTML TEXT =========================================================================================================================
                $("#orderSubTotalText").html('$'+ orderSubTotal );
                $("#orderTaxText").html('$'+ orderTax);
                $("#orderGrandTotalText").html('$'+ orderGrandTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));

                //= COPY SUB-TOTAL AND TAX TO HIDDEN FIELDS
=====================================================================================================
                $("#orderSubTotalTemp").val(orderSubTotal);
                $("#orderTaxTemp").val(orderTax);
                $("#orderGrandTotalTemp").val(orderGrandTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));
                // $("#orderTotalWrapper").slideDown('slow','easeOutBounce');
            }
        </script>
    </body>
</html>
ASKER CERTIFIED SOLUTION
Zakaria Acharki
Analyst Developer
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros