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/936
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/936
<!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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You're welcome anytime sir and glad I could help.
ASKER