Develop Reference

Javascript and Ajax each row 3 different Total Calculations not working properly

Here is the script used by ajax library and javascript.
Total order column Total price working fine.
But
Total Calculations for the discount column and net price column not working properly.
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 25;
$('.row1c').html((row1c).toFixed(2));
});
$('.row1a').keyup(function(ev){
var row1ac = $(this).val() * 15;
$('.row1ac').html((row1ac).toFixed(2));
});
$('.row1b').keyup(function(ev){
var row1bc = $(this).val() * 10;
$('.row1bc').html((row1bc).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 45;
$('.row2c').html((row2c).toFixed(2));
});
$('.row2a').keyup(function(ev){
var row2ac = $(this).val() * 25;
$('.row2ac').html((row2ac).toFixed(2));
});
$('.row2b').keyup(function(ev){
var row2bc = $(this).val() * 20;
$('.row2bc').html((row2bc).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row55c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row555c').text(total.toFixed(2));
})
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<tr>
<th>Cracker Name</th>
<th>Cracker Photo</th>
<th>Packing Model</th>
<th>Retail Price</th>
<th>You Save (Discount - 60%) <br /></th>
<th>Selling Price<br /></th>
<th>Quantity</th>
<th>Total Order</th>
<th>Discount</th>
<th>Net Price</th>
</tr>
<tr>
<td>3.5'' Laxmi</td>
<td>--</td>
<td>5 in 1 Packet</td>
<td>25</td>
<td>15</td>
<td>10</td>
<td>
<input type="text" name="pages" class="row1 row1a row1b" /> </td>
<td><span class="row1c">0.00</span> </td>
<td><span class="row1ac">0.00</span> </td>
<td><span class="row1bc">0.00</span> </td>
</tr>
<tr>
<td>3.5'' Laxmi</td>
<td>--</td>
<td>5 in 1 Packet</td>
<td>45</td>
<td>25</td>
<td>20</td>
<td>
<input type="text" name="pages" class="row2 row2a row2b" /> </td>
<td><span class="row2c">0.00</span> </td>
<td><span class="row2ac">0.00</span> </td>
<td><span class="row2bc">0.00</span> </td>
</tr>
<tr>
<td colspan="7" align="right">Total </td>
<td><span class="row5c">0.00</span> </td>
<td><span class="row55c">0.00</span> </td>
<td><span class="row555c">0.00</span> </td>
</tr>
</table>

Update to your SCRIPT with the below code.
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 25;
$('.row1c').html((row1c).toFixed(2));
});
$('.row1a').keyup(function(ev){
var row1ac = $(this).val() * 15;
$('.row1ac').html((row1ac).toFixed(2));
});
$('.row1b').keyup(function(ev){
var row1bc = $(this).val() * 10;
$('.row1bc').html((row1bc).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 45;
$('.row2c').html((row2c).toFixed(2));
});
$('.row2a').keyup(function(ev){
var row2ac = $(this).val() * 25;
$('.row2ac').html((row2ac).toFixed(2));
});
$('.row2b').keyup(function(ev){
var row2bc = $(this).val() * 20;
$('.row2bc').html((row2bc).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().next().find('span').text());
})
$('.row55c').text(total.toFixed(2));
})
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().next().next().find('span').text());
})
$('.row555c').text(total.toFixed(2));
})
});
just changed two lines
for discount:
total += Number($(this).parent().next().next().find('span').text());
and for net total
Number($(this).parent().next().next().next().find('span').text());
DEMO

Assign classes to your elements as below :
<td><input type="text" name="pages" class="row1 row1a row1b" /></td>
<td><span class="row1c total1">0.00</span></td>
<td><span class="row1ac total2">0.00</span></td>
<td><span class="row1bc tota3">0.00</span></td>
And
<td><input type="text" name="pages" class="row2 row2a row2b" /></td>
<td><span class="row2c total1">0.00</span></td>
<td><span class="row2ac total2">0.00</span></td>
<td><span class="row2bc tota3">0.00</span></td>
Functions that calculate totals should look like this :
$('input[type=text]').keyup(function() {
var total = 0;
$('.total1').each(function() {
total += Number($(this).text());
})
$('.row5c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
var total = 0;
$('.total2').each(function() {
total += Number($(this).text());
})
$('.row55c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
var total = 0;
$('total3').each(function() {
total += Number($(this).text());
})
$('.row555c').text(total.toFixed(2));
});

Calculate values from multiple number fileds - Jquery

I am trying to calculate price based on quantity and price and calculating a subtotal by adding all products prices.
below is the code of html
<tr>
<td>
<input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
</td>
</tr>
<tr>
<td>
<input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
</td>
</tr>
<tr>
<td>
<h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
<h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
</td>
</tr>
And I am trying The below js
jQuery( document ).on( 'input', '.se-ticket-qty', function() {
var sum = 0;
jQuery(this).each(function(i){
var unit_price = jQuery(this).data('unit-price');
var amount = jQuery(this).val();
var current_sub_total = parseFloat(unit_price);
sum += current_sub_total;
var sub_total = jQuery('#se-sub-total').attr('data-sub-total');
var final_sub_total = parseFloat(sub_total) + sum;
jQuery('#se-sub-total').attr('data-sub-total', final_sub_total.toFixed(2));
jQuery('#se-sub-total').html(final_sub_total.toFixed(2));
});
console.log(sum);
});
But There is an error in calculating.The sub total is working fine if I use upper arrow in number field.But if i use below arrow or input an number by manually it is not working.

It looks like you just had a few small issues with how you were using each logic and adding up the totals. Here is a snippet that does what I think you were trying to do. Just un-comment the console.logs to see how the order of operations changed how the final sum is calculated. I am not sure what you wanted with the second display with 8$:
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
$(document).on('input', '.se-ticket-qty', function(){
CalculateTotal();
});
});
function CalculateTotal(){
var sum = 0;
$(".tableWithInputs").find( ".se-ticket-qty" ).each(function( index ){
var unit_price = parseFloat($(this).data('unit-price'));
var amount = parseFloat($(this).val());
var totalPrice = unit_price * amount;
//console.log("unit_price: " + unit_price);
//console.log("unit_price: " + unit_price);
//console.log("amount: " + amount);
//console.log("totalPrice: " + totalPrice);
sum += parseFloat(totalPrice);
});
$('#se-sub-total').attr('data-sub-total', sum.toFixed(2));
$('#se-sub-total').text(sum.toFixed(2));
//console.log(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableWithInputs">
<tr>
<td>
<input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
</td>
</tr>
<tr>
<td>
<input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
</td>
</tr>
<tr>
<td>
<h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
<h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
</td>
</tr>
</table>

How do I get the product per row using jquery?

How can I get the product per row in the table?
Example in table:
data1 data2 data3 total
1 2 3 6
2 2 3 12
Here is my html table that I have created:
$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data3 * 1) * ($data2 * 1) * ($data3 * 1);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

Run this and its multiplying correctly. You had it doing data3 * data2 * data3 instead of 1 2 and 3
$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data1) * ($data2) * ($data3);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

var $data1 = $( ".data1" ).val();
var $data2 = $( ".data2" ).val();
var $data3 = $( ".data3" ).val();
var $total = ($data1) * ($data2) * ($data3);
$('.multTotal').val($total);
put the val in each var then multiplied, then put the total in the multiTotal :)

$(document).ready(function() {
$(".txtMult input").keyup(multInputs);
function multInputs() {
// for each row:
$("tr.txtMult").each(function() {
// get the values from this row:
var $data1 = $('.data1', this).val();
var $data2 = $('.data2', this).val();
var $data3 = $('.data3', this).val();
var $total = ($data1 * 1) * ($data2 * 1) * ($data3 * 1);
$('.multTotal', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
</th>
<th>
total
</th>
</tr>
<tr class="txtMult">
<td>
<input name="data1" class="data1" />
</td>
<td>
<input name="data2" class="data2" />
</td>
<td>
<input name="data3" class="data3" />
</td>
<td>
<input class="multTotal" type="number" />
</td>
</tr>
</table>

Thanks guys for the help.
I got the solution for these
`$(document).on("keyup", ".data1, .data2, .data3", function() {
var tablerow = $(this).parent("td").parent("tr");
var data1 = tablerow.find(".data1").val();
var data2 = tablerow.find(".data2").val();
var data3 = tablerow.find(".data3").val();
var total = data1 * data2 * data3;
tablerow.find(".multTotal").val(total);
});
`

Jquery subtotal function conflicting with js gst function

O.k today is starting to be 1 step forward and 2 steps back. I have a Jquery function that does the price x qty = subtotal in the form and then each subtotal is calculated into a total, Which is all fine and dandy. I then have a plain js function that took that total value and added the gst and then a further subtotal figure which was created on it's own and works then at this point when i tried to move it over the gst and finial total functions won't work and i can't get any error codes out of it either. At this point i can only assume that the js script can't talk to the Jquery script or something is really wrong.
// Jquery script
<script type="text/javascript">
jQuery(function($) {
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
}).change();
});
</script>
// JS script
<script type="text/javascript">
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("ex-gst").value;
var gstPrice = document.getElementById("gst").value;
// Get the GST price
gstPrice = exPrice * 0.1;
var TPrice = parseInt(gstPrice) + parseInt(exPrice);
// Set the GST price in its form element
document.getElementById("gst").value = gstPrice;
document.getElementById("inc-gst").value = TPrice;
}
</script>
// bottom of HTML
<form>
<table>
<tr>
<th><input type='text' name='po101' id='po101'/></th>
<td><input name='po102' type='text' id="po102"/></td>
<td><input name='po103' type='text' id="po103" /></td>
<td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td>
<th><input name='po105' type="text" class='qty' id="po105" value="0" /></th>
<td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td>
</tr>
<tr>
<th height='24' colspan="7">Total:<input type='text' id='Total' name='Total' class='total' readonly="true" onChange="updatePrice()"/></th>
</tr>
<tr>
<th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th>
</tr>
<tr>
<th height='24' colspan="7">
<input type='text' id="gst" name='gst' onChange="updatePrice()" />
<input type='text' id="inc-gst" name='inc-gst' onChange="updatePrice(this.form)"/>
</th>
</tr>
</table>
</form>

I have now edited you code, and changed this line
var exPrice = document.getElementById("ex-gst").value;
to
var exPrice = document.getElementById("Total").value;
I have also updated the code by removing onChange() from HTML and added the trigger for your updatePrice() function to the change event.
And then this is the result (I have also added the jQuery version as comments, both will work).
jQuery(function($) {
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
updatePrice();
}).change();
});
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("Total").value;
//var exPrice = $('#Total').val() //this is jQuery
var gstPrice = document.getElementById("gst").value;
//var exPrice = $('#gst').val() //this is jQuery
// Get the GST price
gstPrice = exPrice * 0.1;
var TPrice = parseInt(gstPrice) + parseInt(exPrice);
// Set the GST price in its form element
document.getElementById("gst").value = gstPrice;
//$('#gst').val(gstPrice) //this is jQuery
document.getElementById("inc-gst").value = TPrice;
//$('#inc-gst').val(TPrice) //this is jQuery
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<th>
<input type='text' name='po101' id='po101' />
</th>
<td>
<input name='po102' type='text' id="po102" />
</td>
<td>
<input name='po103' type='text' id="po103" />
</td>
<td>$
<input name='po104' type="text" class='tradeprice' id="po104" value="0" />
</td>
<th>
<input name='po105' type="text" class='qty' id="po105" value="0" />
</th>
<td>
<input name='po106' type='text' class='subtotal' id="po106" readonly="true" />
</td>
</tr>
<tr>
<th height='24' colspan="7">Total:
<input type='text' id='Total' name='Total' class='total' readonly="true" />
</th>
</tr>
<tr>
<th height='24' colspan="7">
<div id='submit'>
<input type='submit' />
</div>
</th>
</tr>
<tr>
<th height='24' colspan="7">
<input type='text' id="gst" name='gst' />
<input type='text' id="inc-gst" name='inc-gst' />
</th>
</tr>
</table>
</form>

Change cell value depending on input of another cell with JavaScript

thanks to peoples help on here I have nearly finished what I set out to do yesterday/
I have included a fiddle here http://jsfiddle.net/uzW5e/
I would like it that when someone enters a value greater than 85 in the column headed Percentage Grade (class percGrade) the value 1 is put in the column headed Pass Level (class passLevel) but it isn't working?
<table align="center">
<tr>
<th>
Module
</th>
<th>
Percentage Grade
</th>
<th>
Credits
</th>
<th>
Pass Level
</th>
<th>
WGC
</th>
</tr>
<tr class="multRow">
<td>
<input name="module" />
</td>
<td>
<input name="percentageGrade" class="percGrade" />
</td>
<td>
<input name="credits" class="credits"/>
</td>
<td>
<input name="passLevel" class="passLevel"/>
</td>
<td>
<span class="multTotal">0.00</span>
</td>
</tr>
<tr>
<td colspan="5" align="right">
Total <span id="grandTotal">0</span>
</td>
<script>
$(document).ready(function () {
$(".multRow input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.multRow").each(function () {
// check value entered for Percentage Grade
// & change Pass Level to value accordingly
var $num = 0;
if ($('.percGrade', this).val() > 85) {
$num = 1;
$('.passLevel',this).text($num);
}
// get the values from this row:
var $val1 = $('.credits', this).val();
var $val3 = $('.percGrade', this).val();
var $val2 = $('.passLevel', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
</script>

Since .passLevel is a text field, you should use .val instead of .text:
$('.passLevel',this).val($num);