Develop Reference

How to make purely client side shopping cart calculation in jquery?

Above is my shopping cart. Below I show the flow.
[product image clicked] -> ajax request fetches details from database
for that particular product id and appends (product name,id and price
automatically appended) via jquery.
[onfocus QTY] -> jquery autocalculates sub total and displays ->
also sends ajax request to calculate total,gst and total payment and
this is where the problem begins.
Since the ajax request made onfocus, each time QTY textfield is
focused, it goes to the php page and make calculation for total,gst
and total payment thus the amount keep increasing beyond logic.
I save all values that passed to the php page in session. So each time,ajax request carries qty and sub total values it keeps adding to the session. To save the hassle, I would like to try out purely client side calculation for the white area just like how I calculate sub total without making ajax request.
Whats the way, can somebody give me idea on how to add total quantity and total sub_total for all items without having to send to PHP page for the calculation? Maybe can introduce to me jQuery array sort of thing please. I tried searching online but couldn't understand.
HTML
<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Qty</th>
<th>Sub Total</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Total</td><td></td><td><span class='qty_1'></span><input type='hidden' name='total_qty' value=''></td><td><span class='total'></span><input type='hidden' name='total' value=''></td><td></td>
</tr>
<tr>
<td>GST 6%</td><td></td><td></td><td><span class='gst'></span><input type='hidden' name='gst' value=''></td><td></td>
</tr>
<tr>
<td>Discount (x%)</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>Total Payment</td><td></td><td></td><td><span class='grand'></span><input type='hidden' name='grand' value=''></td><td></td>
</tr>
<tr><td colspan="5" class="checkout"><input type="submit" name='submit' id="checkout" value="CHECK OUT"/></td></tr>
</tfoot>
</table>
</form>
Script to append elements into form
for (i = 0; i < data.length; i++) {
$(".header_tbl tbody").prepend("<tr id='"+data[i].id+"'><th class='product'>"+data[i].catalog_name+"<input type='hidden' name='catalog_name[]' value='"+data[i].catalog_name+"'></th><td class='price'>RM <span>"+data[i].price_normal+"</span><input type='hidden' name='"+data[i].id+"_price[]' value='"+data[i].price_normal+"'></td><td class='qty_"+data[i].id+"'><input type='text' name='qty' style='width:50px;height:20px;margin:10px auto;' onfocus='subTotal(\""+data[i].id+"\")' value=''><input type='hidden' name='"+data[i].id+"_qty2[]' value=''></td><td class='sub_total'><span class='sub_total_"+data[i].id+"'></span><input type='hidden' name='"+data[i].id+"_sub_total[]' value=''></td><td><img src='"+p_img_path+"del.png' style='width:15px;cursor:pointer;' onClick='del_this(\""+data[i].id+"\")'></td></tr>");
}

here is my approach:
$( document ).ready(function() {
$(document).on("input paste keyup", ".product_qty", function( event ) {
var product_quantity = 0;
var product_price = 0;
var gst_amount = 0;
var sub_total = 0;
var total_qty = 0;
var grand_total = 0
product_quantity = $(this).val();
product_price = $(this).parent().prev().html();
sub_total = product_price * product_quantity;
$(this).parent().next().html(sub_total);
$('.product_qty' ).each( function( k, v ) {
product_quantity = parseInt ( $(this).val() ) ? parseInt ( $(this).val() ) : 0;
product_price = parseFloat($(this).parent().prev().html())?parseFloat($(this).parent().prev().html()):0;
console.log(product_quantity);
console.log(product_price);
sub_total = parseFloat ( product_price * product_quantity );
console.log(sub_total);
total_qty +=product_quantity;
grand_total += sub_total;
});
if ( grand_total > 0 ){
gst_amount = ( grand_total * 6 ) /100;
}
$("#total_qty").html(total_qty);
$("#total_amount").html(grand_total);
grand_total +=gst_amount;
$("#gst_amount").html(gst_amount);
$("#discount_amount").html(0);
$("#grand_total").html(grand_total);
});
//
$(document).on("click", ".delete", function( event ) {
var cart_item = 0;
$(this).parent().parent().remove();
cart_item = $('.product_qty').length;
if ( cart_item <= 0 )
{
$("#total_qty").html('0');
$("#total_amount").html('0');
$("#gst_amount").html('0');
$("#discount_amount").html(0);
$("#grand_total").html('0');
} else {
$('.product_qty').trigger('keyup');
}
});
});
// End Document Ready
.bs-example{
background: #355979;
margin: 20px;
}
a {
color:#FFF;
font-weight: bold;
}
table{
color:#FFF;
font-weight: bold;
}
table input{
color:#000;
}
.delete{
color:#E13D3D;
font-size: 20px;
font-weight: bold;
}
.checkout{
background: #FF002A;
}
.checkout a{
color: #FFF;
font-weight: bold;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="con1" style="align: center; width: 30%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con0" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 10%" />
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Karpap Pushing Ayu</td>
<td class="product_price">5</td>
<td><input type="text" name="qty" class="product_qty" value="5"></td>
<td class="amount_sub_total">25</td>
<td>x</td>
</tr>
<tr>
<td>Slimming Tea</td>
<td class="product_price">25</td>
<td><input type="text" name="qty" class="product_qty" value="5"></td>
<td class="amount_sub_total">125</td>
<td>x</td>
</tr>
<tr>
<td>Tudung Shawl Butterfly</td>
<td class="product_price">15</td>
<td><input type="text" name="qty" class="product_qty" value="3"></td>
<td class="amount_sub_total">45</td>
<td>x</td>
</tr>
<tr>
<td>Tudung Shawl Butterfly 5</td>
<td class="product_price">20</td>
<td><input type="text" name="qty" class="product_qty" value="2"></td>
<td class="amount_sub_total">40</td>
<td>x</td>
</tr>
<tr>
<td>Total</td>
<td> </td>
<td id="total_qty">15</td>
<td id="total_amount">235</td>
<td> </td>
</tr>
<tr>
<td>GST 6 %</td>
<td> </td>
<td> </td>
<td id="gst_amount">14.1</td>
<td> </td>
</tr>
<tr>
<td>Discount (x%)</td>
<td> </td>
<td> </td>
<td id="discount_amount"> </td>
<td> </td>
</tr>
<tr>
<td>Total Payment</td>
<td> </td>
<td> </td>
<td id="grand_total">249.1</td>
<td> </td>
</tr>
<tr>
<td colspan="5" class="checkout">CHECKOUT</td>
</tr>
</tbody>
</table>
</div>
</div>
you have to change this as you need.

Your DOM structure for the product would look something like this
HTML CODE:
<table class='header_tbl'>
<tr>
<th>Product</th>
<th>Price</th>
<th>Qty</th>
<th>Sub Total</th>
</tr>
<tr class="product_details">
<td class="product">T-shirt</td>
<td class="price">
<input type='text' name='grand' value='300' />
</td>
<td class="qty">
<input type='text' name='grand' value='3' />
</td>
<td class="subtotal">
<input type='text' name='grand' value='' />
</td>
</tr>
</table>
The change handler for calculating the cost may look like this
JS CODE:
$(document).ready(function() {
$('.header_tbl').on('change', '.price, .qty', function() {
var pr_price = $(this).closest('.product_details').find('.price input').val();
var qty = $(this).closest('.product_details').find('.qty input').val();
var sub_total = pr_price * qty;
$(this).closest('.product_details').find('.subtotal input').val(sub_total);
});
});
Live Demo # JSFiddle
Note:The above code/DOM structure is just for illustration of the client side calculation, so dont consider it as a final solution.

AngularJS increment id value of items in nested repeater

I have the following code in which there are questions and choices and I need the choices to have incremented id values.
However, I need the incrementation to restart each time there is a new question. Most of the examples I've found so far increment for all (e.g. using $index). But I've looked at several articles here on SO such as this one and not getting the results that I need:
What I need is this:
Question 1
Choice10 (the first numerical value is the Id of the question,
Choice11 the second numerical value should be the incremented id)
Choice12
Question 2
Choice20
Choice21
Choice22
Choice23
The html code looks like this:
<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions track by $index">
...Question details here...
</tr>
<tr>
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
<tbody>
<tr style="width: 100%;" ng-repeat-start="q in questions">
...Question details here...
</tr>
<tr ng-repeat-end="">
<td class="Bold_10" colspan="4">
<table summary="" style="border: none; background: none">
<tbody>
<tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
<td style="width: 2em;">X</td>
<td>
<input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
<td style="text-align: left;">
<input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" /> <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
</tr>
<tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each ng-repeat has its own index and you can access the index from the nested loop. However be aware that with your implementation the id inChoice111 might be misleading.
Question 1.11 == Question 11.1

Unable to dynamically calculate an input value onchange

I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>

You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/

The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;

Table not aligning within my div and wider than I set it

I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>

The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!

the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}

Select/Deselect All Checkboxes along with colour changing of a selected row using jquery

I have a table where each row has some data and the user can submit all rows or single row or some rows. So, every row has a checkbox now and If the user checks the checkbox the background colour of this row should be changed(I have implemented this using jquery). Now there is another checkbox to select All these checkboxes, I have implemented this too with jquery. Now the issue is that when I selectAll checkboxes the row background-colour doesnot change , but when I check individual rows it gets changed. Being a novice coder I can understand that click event is not happening so the background colour is not changing. So I have used change event instead of click , but it's still the same. The functions for select All and row background colour change are working good but individually. Need help regarding this...
Thanks in advance,
NoviceCoder.

Without any of your code I tried something. See if you can apply to your code. (working example)
HTML
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" id="selectAll" /></th>
<th>Row name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 0</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 1</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 2</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 3</td>
</tr>
<tr>
<td><input type="checkbox" name="select" /></td>
<td>test row 4</td>
</tr>
</tbody>
</table>
CSS
.selected { background-color: #ffff00; }
Javascript
jQuery(function($) {
$('tbody :checkbox').change(function() {
$(this).closest('tr').toggleClass('selected', this.checked);
});
$('thead :checkbox').change(function() {
$('tbody :checkbox').prop('checked', this.checked).trigger('change');
});
});

this is a simple example for your request just copy/paste all this code, in new page and run it. Enjoy
<html>
<head>
<title>How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
//To Highlight
if ($(this).attr("checked") == true)
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
}
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
}
});
function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
});
</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>