We Keep Coding

How to get the sum price from table using accounting.js in jquery?

I had a hard time getting the sum price of each row in my table. Im using accounting library in my price for currency purposes and it does not get the actual total price because of the character and the comma when the price exceed to thousands.
This is my rows when appending to the table
$('body').on('click','.js-add',function(){
var target = $(this);
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
swal("Enter number of item to buy:", {
content: "input",
})
.then((value) => {
if (value == "") {
swal("Error","Entered none!","error");
}else{
var qtynum = parseInt(value);
if (isNaN(qtynum)){
swal("Error","Please input a valid number!","error");
}else{
var total = value * price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+value+"</td><td class='totalPrice'>"+accounting.formatMoney(total,{symbol:"₱",format: "%s %v"})+"</td><td><button class='btn btn-danger' type='button' id='delete-row' style='padding:0px;'>&times</button><tr>");
}
}
});
});
This is what I've done so far for adding all the prices in the table.
$(document).ready(function(){
var TotalValue = 0;
$("#tableData tr").each(function(){
TotalValue += parseFloat($(this).find('.totalPrice').text());
});
alert(TotalValue);
});
I'd put alert for testing purposes. The TotalValue will be shown on the outside of the table. Hope someone will give me an idea to solve this.

How can I pass the checked checkbox values to another page?

Is there a way for this? What I want to happen is the hyperlinks from the left side will have sum totals, and so on and on the final page/tab, the summation of all the hyperlinks will be shown there. Here's a jsFiddle to better understand my point https://jsfiddle.net/nerdfighter/121myofn/1/
Here's the initial JavaScript code I wrote in adding the checked chekcboxes
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
window.onload = function() {
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('input').value);
console.log(new_total);
document.getElementById('input').value = new_total + add
}
}
}
</script>
This is just a small project and I don't I won't be using server-side.

There's no id="payment-total" nor id="input" elements in your jsFiddle. So it won't work.
The algorithm is looking correct. But I recommend to pay more attention to strict code formatting - that helps to avoid mistakes.
I've added the following lines and jsFiddle began to work:
<span id="payment-total">0</span>
<input id="input" value="0">
Update by comments:
// TODO: Start using addEventListener() instead
window.onload = function() {
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
// TODO: Consider state variables instead of parsing innerHTML
// TODO: Never miss semicolons. It works, but causes hard debug sometimes
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('input').value);
console.log(new_total);
document.getElementById('input').value = new_total + add
// Per tab total calculation
var tabTotalEl = document.getElementById(this.dataset.tabTotalId);
tabTotalEl.innerHTML = parseFloat(tabTotalEl.innerHTML) + add;
}
}
}
Add sum elements like this
<span id="tab-vegetables-total">0</span>
Add data-tab-id="tab-vegetables-total" attributes to the checkboxes.

jquery - checkbox oncheck total will be updated

I was trying to develop a checkbox using jQuery ..where oncheck total will be updated but when i uncheck it will be back as it is.. Here total updated with oncheck but it don't get back to total amount when i uncheck it .what could be possible error..anyone help please?
$('#vat').on('click',function(e){
var vat = document.getElementById("vat").value;
var total = document.getElementById("total").value;
var sum = +total + +vat;
document.getElementById("total").value = sum;
});

Assume #vat is your input id
1- You need to use change instead of click for radio and checkbox inputs
2- check if checked or not by using this.checked
$('#vat').on('change',function(e){
var sum = 0;
var vat = document.getElementById("vat").value;
var total = document.getElementById("total").value;
if(this.checked === true){
sum = total + vat;
}else{
sum = total - vat;
}
document.getElementById("total").value = sum;
});
And while you're using and tagged jquery
$('#vat').on('change',function(e){
var sum = 0;
var vat = parseInt($(this).val());
var total = parseInt($("#total").val());
if(this.checked === true){
sum = total + vat;
}else{
sum = total - vat;
}
$("#total").val(sum);
});

jquery update total of textboxes

I have the following jquery function that adds up 7 textboxes and puts the total in a grand total textbox:
$(document).ready(function() {
$('.class2').keyup(function() {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val((sum).toFixed(2));
});
});
The 7 textboxes are populated by another function. When a quantity is entered, those textboxes are auto populated by the quantity times the price. The problem I am having is that the grand total textbox is not being populated until you tab out of the textbox that has the calculated price. However, if I enter the price directly into the textbox (without using the quantity), the grand total textbox updates immediately. Is there something that I can do that will update the grand total textbox after I enter a quantity? The page is at www.pfacmeeting.org/badgeform2.php. Thanks for any help with this.
-cdr6800

When you auto-populate the textboxes, try triggering the keyup event, using .trigger() function:
$(".class2").trigger("keyup");
You should change your script to:
$('input[name="BadgeQuantity"]').keyup(function(){
var a = 50;
var b = $(this).val();
$('input[name="BadgeTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="ThursdayBreakfast"]').keyup(function(){
var a = 42;
var b = $(this).val();
$('input[name="ThursdayBreakfastTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="ThursdayLunch"]').keyup(function(){
var a = 53;
var b = $(this).val();
$('input[name="ThursdayLunchTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayBreakfast"]').keyup(function(){
var a = 42;
var b = $(this).val();
$('input[name="FridayBreakfastTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayLunch"]').keyup(function(){
var a = 53;
var b = $(this).val();
$('input[name="FridayLunchTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('input[name="FridayDinner"]').keyup(function(){
var a = 115;
var b = $(this).val();
$('input[name="FridayDinnerTotal"]').val((a * b).toFixed(2));
$(".class2").trigger("keyup");
});
$('.DrawingTickets').change(function(){
var selectedValue = parseFloat($(this).val());
$('#DrawingTicketsTotal').val((selectedValue).toFixed(2));
$(".class2").trigger("keyup");
});
$('.class2').keyup(function() {
var sum = 0;
$('.class2').each(function() {
sum += Number($(this).val());
});
$('#GrandTotal').val((sum).toFixed(2));
});

jQuery loop through table to display values

I'm at a loss here.
I created a quick script that will add a new row to a table and also has the capability to delete a row.
jsFiddle -->http://jsfiddle.net/wLpJr/10/
What I want to achieve is this:
Display each value of each row (in the div with id='thedata')
I originally started off with adding a number at the end of each id, starting at '1', and incrementing each time the user adds a row.
//This is random code
var rowcount = parseInt($('#rowcount').val());
var newcount = rowcount + (1*1);
var x = $('#radioinput' + newcount).val('a value');
$('#rowcount').val(newcount);
The problem is that lets say you add 5 rows. Now delete row 3. When you loop through the table of data you will get an error because row "3" does not exist. You have rows 1, 2, 4, 5, 6. Specifically - the input with id = 'radioinput3' will not be present.
I then decided to do this:
$('#maintable > tbody > tr').each(function() {
radiovalue[i] = $("input[type='hidden']", this).map(function() {
var vid = 'radio' + i;
var myval = this.value;
var radioinput = document.createElement("input");
radioinput.type = "hidden";
radioinput.value = myval; // set the CSS class
radioinput.id = vid;
$('#maintable').append(radioinput);
}).get()
text1value[i] = $('td > input', this).map(function() {
var vid = 'text1pos' + i;
var myval = this.value;
var text1input = document.createElement('input');
text1input.type='hidden';
text1input.value = myval;
text1input.id = vid;
$('#maintable').append(text1input);
}).get()
text2value[i] = $('td > input', this).map(function() {
var vid = 'text2pos' + i;
var myval = this.value;
var text2input = document.createElement('input');
text2input.type='hidden';
text2input.value = myval;
text2input.id = vid;
$('#maintable').append(text2input);
}).get();
});
The problem here is that I'm getting 'undefined' values.

You are looping through a counter, which you increment everytime you add a new row, but do not take into account that a row can be deleted at any time. Instead, just use the each function to loop over the elements remaining in the DOM.
Add thead and tbody tags to your table, it will make your life easier.
I'm not sure why you have those hidden div to hold the input[type=radio] values, you don;t need them, access the values directly.
$('#showdata').click(function() {
$("#maintable tbody tr").each(function(i, v) {
var myp = "<p>Radio value is = " + $(this).find('input[type=radio]:checked').val()
+ "\nText1 value is = " + $(this).find('input[id$=text1]').val()
+ "\nText2 value is = " + $(this).find('input[id$=text2]').val() + "</p>";
$('#thedata').append(myp);
});
});
jsFiddle Demo
You could add a CSS class to the input text fields to make it easier to get, but i just used the jQuery ends with selector.
Also, you delete selector if far too high up the DOM tree on (document), instead restrict it as near as you can, in this case the #maintable.