Integrating new functionality into existing javascript calculations on order form

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>

Open in new window

saabStoryAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
You could do that by adding the fee value inside the calculateOrderSum() function, something like :

  if (orderSubTotal !== '0.00') {
    orderDelivery = $("#deliver").is(':checked') ? 4 : 0;
  }
  orderGrandTotal = Number(orderSubTotal.replace(/\,/g, '')) + Number(orderTax.replace(/\,/g, '')) + orderDelivery;

Open in new window


NOTE : it will be better to put the events handlers inside the ready function, and also to add a trigger for the Pick up my order by default tot init the view values :

$('#shop').trigger('click');

Open in new window


Working live fiddle

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
saabStoryAuthor Commented:
That is an absolutely perfect and teaches me a different way of doing things in the future.  Thank you very much!
Zakaria AcharkiAnalyst DeveloperCommented:
You're welcome anytime sir and glad I could help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.