Avatar of saabStory
saabStory
Flag for United States of America asked on

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

JavaScriptjQuery

Avatar of undefined
Last Comment
Zakaria Acharki

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Zakaria Acharki

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
saabStory

ASKER
That is an absolutely perfect and teaches me a different way of doing things in the future.  Thank you very much!
Zakaria Acharki

You're welcome anytime sir and glad I could help.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck