We help IT Professionals succeed at work.

Integrating new functionality into existing javascript calculations on order form

saabStory
saabStory asked
on
99 Views
Last Modified: 2018-11-19
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

Comment
Watch Question

Analyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
That is an absolutely perfect and teaches me a different way of doing things in the future.  Thank you very much!
Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
You're welcome anytime sir and glad I could help.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.