Link to home
Start Free TrialLog in
Avatar of saabStory
saabStoryFlag 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:

<!DOCTYPE html>
<html lang="en" xmlns="">
        <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="//">
        <link rel="stylesheet" href="//">
        <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;}

        <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>
        <table cellspacing="0" cellpadding="0" class="orderTable">
                <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>
                <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>
        <div class="totalWrapper">
            <div id="subTotalWrapper" class="wrapper">
                <div id="orderSubTotalText" class="orderSubTotal">$0.00</div>
            <div id="taxTotalWrapper" class="wrapper">
                <div id="orderTaxText" class="succTShirtOrderTotal">$0.00</div>
            <div id="orderDeliveryWrapper" class="wrapper" style="display:none;">
                <div id="orderDeliveryText" class="succTShirtOrderTotal">$4.00</div>
            <div id="grandTotalWrapper" class="wrapper">
                <div><strong>Total to be Charged:</strong></div>
                <div id="orderGrandTotalText" class="succTShirtOrderTotal">$0.00</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="//" ></script>
        <script src="//"></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();}

            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;

                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,"));

                $("#orderGrandTotalTemp").val(orderGrandTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));
                // $("#orderTotalWrapper").slideDown('slow','easeOutBounce');

Open in new window

Avatar of Zakaria Acharki
Zakaria Acharki
Flag of Morocco image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of saabStory


That is an absolutely perfect and teaches me a different way of doing things in the future.  Thank you very much!
You're welcome anytime sir and glad I could help.