I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});
Related
I was wondering If the payment status is Y, can the price be subtracted accordingly. The amount yet to be paid will show the subtraction result
For example, in this case, since both 50 and 10 is paid,
the amount yet to be paid will be the "total (ie 70) minus (50+10)" = 10
Many thanks.
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th><th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
Yes, you can check the payment status column for N and sum those values. Like this:
$(document).ready(function() {
$("#myTable").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#myTable tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$("#total_sum_value").html(calculated_total_sum);
$("#arrears").html(to_be_paid);
}
calculate();
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th width="100">Name </th>
<th>Price</th>
<th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
Another solution would be, getting the parent for every iteration, it might a little less performance friendly but here you go:
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var yet_to_be_paid = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if($(this).parent().parent().find(".status").first().val() == "Y") {
yet_to_be_paid += parseFloat($(this).val());
}
});
$("#total_sum_value").html(calculated_total_sum);
$("#arrears").html(calculated_total_sum - yet_to_be_paid);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th><th>Payment status</th>
</tr>
<tr>
<td><span>A</span></td>
<td><input type="text" class='txtCal' value="50" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="Y" /></td>
</tr>
<tr>
<td><span>C:</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
<td><input type="text" class='status' value="N" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
<tr>
<td><span><b>Yet to be paid</b></span></td>
<td><b><span id="arrears"></span></b></td>
</tr>
</table>
This is my code where if i put quantity then it will calculate it and show it in total amount. my problem is that if i change my quantity in between process my total amount is not change.
How to do it onchange quantity total amount have to different
<script>
function valid(obj)
{
var frm=document.getElementById("frm");
var qty=parseInt(document.getElementById("quantity").value);
var price=parseInt(obj.value);
var total=parseInt(document.getElementById("total").value);
if(isNaN(total))
{
total=0;
}
if(obj.checked==true)
{
total=total+(qty*price);
document.getElementById("total").value=total;
}
else
{
total=total-(qty*price);
document.getElementById("total").value=total;
}
/*for(var i=0;i<frm.length;i++)
{
if(frm[i].type=="checkbox")
{
if(frm[i].checked==true)
{
total=total+(parseInt(frm[i].value)*qty);
}
}
}*/
document.getElementById("total").value=total
}
</script>
<form action="abc.html" method="post" id="frm" onsubmit="return valid(this);">
<table>
<tr>
<th colspan="2">Qualification</th>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>BCA</td>
<td><input type="checkbox" name="check_list[]" value="2000" onClick="valid(this);" /></td><td>MCA</td>
</tr>
<tr>
<td><input type="checkbox" name="check_list[]" value="1200" onClick="valid(this);" /></td><td>BBA</td>
<td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>MBA</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="quantity" id="quantity" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="total" id="total" value="" placeholder="Total"></td>
</tr>
<tr>
<td colspan="2"><input type="button" onClick="valid();" name="submit" value="Send" /></td>
</tr>
</table>
</form>
Define var isFormSubimited = false;
Set isFormSubimited = true in valid function.
Add "onchange='onQuantityChange()'" to quantity input element.
Add following function.
function onQuantityChange()
{
if(isFormSubimited && $("input[type='checkbox']:checked").length > 0)
{
//var _form = document.getElementById('frm');
//_form.submit();
valid();
}
}
I have an list with values which is generated by an database query.
I want to see the total sum of values that been selected (by an checkbox) by the user.
Code for checkbox:
<?php
$i = -1;
while ($row = mysql_fetch_array($res))
{
$i++;
?>
echo '<table>
<tr>
<td><input type="checkbox" onclick="bedrag_optellen(this, <?php echo $i ?>);" value= "'.$row['bedrag_incl'].'"></td>
<td>€ '.number_format($row['bedrag_incl'], 2, ',', ' ').'</td>
</tr>
</table>';
}
?>
Code for output field:
<table>
<tr>
<td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
</tr>
</table>
JavaScript
<script type="text/javascript"</script>
function bedrag_optellen(checkbox, nr)
{
var i, totaal = 0;
var elems = document.getElementsByName('bedrag_optellen[]');
var l = elems.length;
for(i=0; i<l; i++)
{
if(formElement['bedrag_optellen[]'][i].checked = true)
{
totaal += parseFloat(elems[i].value) || 0;
}
document.getElementById('bedragen_selected').value = totaal.toFixed( 2 );
}
}
</script>
The code is not working, also there is no error given.
Is there anyone to help me out?
https://jsfiddle.net/fawavmbo/
Check out this fiddle.
I have used jQuery for the simplicity it provides.
I made the following changes:
Added a class cost to the checkboxes.
Removed the onClick attribute.
Added jQuery.
For the code to work in you system, add the code below to your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the snippet.
HTML
<table>
<tr>
<td><input class='cost' type="checkbox" value= "8"></td>
<td>€ 8</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "3"></td>
<td>€ 3</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "19"></td>
<td>€ 19</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "2"></td>
<td>€ 2</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "15"></td>
<td>€ 15</td>
</tr>
<tr>
<td><input class='cost' type="checkbox" value= "12"></td>
<td>€ 12</td>
</tr>
</table>
<table>
<tr>
<td width="51"><input type="text" id="bedragen_selected" name="bedragen_selected" value="" size="10" style="text-align:right;background-color: #e7e7e9" readonly="readonly" /></td>
</tr>
</table>
JS
var sum = 0;
$('.cost').click(function() {
if($(this).is(':checked')) {
sum = sum + parseInt($(this).val());
} else {
sum = sum - parseInt($(this).val());
}
$('#bedragen_selected').val(sum);
});
I have a form that looks like this
<form id="calculator" action="#" method="get">
<h1>Cake Cost Estimator</h1>
<h3>Round Cakes:</h3>
<fieldset id="round">
<table>
<tr>
<td><label>6" Round Cake (6-8): </label></td>
<td><input id="6round" type="text" placeholder=0> </td>
</tr>
<tr>
<td><label>8" Round Cake (12-15): </label></td>
<td><input id="8round" type="text" placeholder=0></td>
</tr>
<tr>
<td><label>9" Round Cake (20-24): </label></td>
<td><input id="9round" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>10" Round Cake (26-30): </label></td>
<td><input id="10round" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>12" Round Cake (34-38): </label></td>
<td><input id="12round" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>14" Round Cake (46-50): </label></td>
<td><input id="14round" type="text" placeholder=0 ></td>
</tr>
</table>
</fieldset>
<h3>Square Cakes:</h3>
<fieldset id="square">
<table>
<tr>
<td><label>6" Square Cake (8-10): </label></td>
<td><input id="6square" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>8" Square Cake (14-18): </label></td>
<td><input id="8square" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>9" Square Cake (22-26): </label></td>
<td><input id="9square" type="text" placeholder=0 ></td>
<tr>
<td><label>10" Square Cake (28-32): </label></td>
<td><input id="10square" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>12" Square Cake (38-40): </label></td>
<td><input id="12square" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>14" Square Cake (56-60): </label></td>
<td><input id="14square" type="text" placeholder=0></td>
</table>
</fieldset>
<h3>Sheet Cake:</h3>
<fieldset id="sheet">
<table>
<tr>
<td><label>1/4 Sheet (15-18): </label></td>
<td><input id="quarter" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>1/2 Sheet (30-35): </label></td>
<td><input id="half" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>Full Sheet (65-70): </label></td>
<td><input id="full" type="text" placeholder=0 ></td>
</tr>
</table>
</fieldset>
<h3>Cupcakes:</h3>
<fieldset id="cupcakes">
<table>
<tr>
<td><label>Basic Cupcake: </label></td>
<td><input id="basic" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>Standard Cupcake: </label></td>
<td><input id="standard" type="text" placeholder=0 ></td>
</tr>
<tr>
<td><label>Premium: </label></td>
<td><input id="premium" type="text" placeholder=0 ></td>
</tr>
</table>
</fieldset>
<h3>TOTAL: $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>
The javascript looks like this
//Prices
$(document).ready(function(){
//apparently you can't declare a variable with a number and letter
var sixround = 39.95;
var eightround = 45.95;
var nineround = 52.95;
var tenround = 60.95;
var twelveround = 74.95;
var fourteenround = 89.95;
var sixsquare = 45.95;
var eightsquare = 52.95;
var ninesquare = 60.95;
var tensquare = 74.95;
var twelvesquare = 99.95;
var fourteensquare = 116.95;
var quarterSheet = 37.95;
var halfSheet = 62.94;
var fullSheet = 95.95;
var basicCupcake = 2.25;
var standardCupcake = 2.50;
var premiumCupcake = 2.75;
//Round cakes
$("#6round").keyup(function() {
//get the value of the key you just entered
var six =$("#6round").val();
//multiply the value by the amount
$("#total").val((sixround *six).toFixed(2));
});
$("#8round").keyup(function() {
var eight =$("#8round").val();
$("#total").val((eightround * eight).toFixed(2));
});
$("#9round").keyup(function() {
var nine =$("#9round").val();
$("#total").val((nineround * nine).toFixed(2));
});
$("#10round").keyup(function() {
var ten = $("#10round").val();
$("#total").val((tenround * ten).toFixed(2));
});
$("#12round").keyup(function() {
var twelve = $("#12round").val();
$("#total").val((twelveround *twelve).toFixed(2));
});
$("#14round").keyup(function() {
var fourteen = $("#14round").val();
$("#total").val((fourteenround * fourteen).toFixed(2));
});
//Square Cakes
$("#6square").keyup(function() {
var sixs = $("#6square").val();
$("#total").val((sixsquare * sixs).toFixed(2));
});
$("#8square").keyup(function() {
var eights = $("#8square").val();
$("#total").val((eightsquare * eights).toFixed(2));
});
$("#9square").keyup(function() {
var nines = $("#9square").val();
$("#total").val((ninesquare * nines).toFixed(2));
});
$("#10square").keyup(function() {
var tens = $("#10square").val();
$("#total").val((tensquare * tens).toFixed(2));
});
$("#12square").keyup(function() {
var twelves = $("#12square").val();
$("#total").val((twelvesquare * twelves).toFixed(2));
});
$("#14square").keyup(function() {
var fourteens = $("#14square").val();
$("#total").val((fourteensquare * fourteens).toFixed(2));
});
//renamed the elemet ids in the html to quarter half and full becuase it didn't like the numbers
//Sheet Cakes
$("#quarter").keyup(function() {
var quart = $("#quarter").val();
$("#total").val((quarterSheet * quart).toFixed(2));
});
$("#half").keyup(function() {
var halfs = $("#half").val();
$("#total").val((halfSheet * halfs).toFixed(2));
});
$("#full").keyup(function() {
var fulls = $("#full").val();
$("#total").val((fullSheet * fulls).toFixed(2));
});
//Cupcakes
$("#basic").keyup(function() {
var bas = $("#basic").val();
$("#total").val((basicCupcake * bas).toFixed(2));
});
$("#standard").keyup(function() {
var stand = $("#standard").val();
$("#total").val((standardCupcake * stand).toFixed(2));
});
$("#premium").keyup(function() {
var prem = $("#premium").val();
$("#total").val((premiumCupcake * prem).toFixed(2));
});
});
This calculates the cost or total of the whole thing for each individual form id like a 6 round cake then can enter a number and it calculates the price for that particuar one. But how do I keep a running total of the total cost
I think differently. I solve this problem with html element attribute.
With this way you can add a lot of input boxes to your page. But you must not forget two attribute class="amountBox" data-var="(this is price which you added to priceList object before)"
then javascript calculates total value. Here jsfiddle : http://jsfiddle.net/5wbhnmwd/
By this way you get rid of the js manipulation for each element that you add to document.
<form id="calculator" action="#" method="get">
<h1>Cake Cost Estimator</h1>
<h3>Round Cakes:</h3>
<fieldset id="round">
<table>
<tr>
<td>
<label>6" Round Cake (6-8):</label>
</td>
<td>
<input id="6round" class="amountBox" data-var="sixround" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>8" Round Cake (12-15):</label>
</td>
<td>
<input id="8round" class="amountBox" data-var="eightround" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>9" Round Cake (20-24):</label>
</td>
<td>
<input id="9round" class="amountBox" data-var="nineround" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>10" Round Cake (26-30):</label>
</td>
<td>
<input id="10round" class="amountBox" data-var="tenround" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>12" Round Cake (34-38):</label>
</td>
<td>
<input id="12round" class="amountBox" data-var="twelveround" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>14" Round Cake (46-50):</label>
</td>
<td>
<input id="14round" class="amountBox" data-var="fourteenround" type="text" placeholder=0>
</td>
</tr>
</table>
</fieldset>
<h3>Square Cakes:</h3>
<fieldset id="square">
<table>
<tr>
<td>
<label>6" Square Cake (8-10):</label>
</td>
<td>
<input id="6square" class="amountBox" data-var="sixsquare" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>8" Square Cake (14-18):</label>
</td>
<td>
<input id="8square" class="amountBox" data-var="eightsquare" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>9" Square Cake (22-26):</label>
</td>
<td>
<input id="9square" class="amountBox" data-var="ninesquare" type="text" placeholder=0>
</td>
<tr>
<td>
<label>10" Square Cake (28-32):</label>
</td>
<td>
<input id="10square" class="amountBox" data-var="tensquare" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>12" Square Cake (38-40):</label>
</td>
<td>
<input id="12square" class="amountBox" data-var="twelvesquare" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>14" Square Cake (56-60):</label>
</td>
<td>
<input id="14square" class="amountBox" data-var="fourteensquare" type="text" placeholder=0>
</td>
</table>
</fieldset>
<h3>Sheet Cake:</h3>
<fieldset id="sheet">
<table>
<tr>
<td>
<label>1/4 Sheet (15-18):</label>
</td>
<td>
<input id="quarter" class="amountBox" data-var="quarterSheet" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>1/2 Sheet (30-35):</label>
</td>
<td>
<input id="half" class="amountBox" data-var="halfSheet" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>Full Sheet (65-70):</label>
</td>
<td>
<input id="full" class="amountBox" data-var="fullSheet" type="text" placeholder=0>
</td>
</tr>
</table>
</fieldset>
<h3>Cupcakes:</h3>
<fieldset id="cupcakes">
<table>
<tr>
<td>
<label>Basic Cupcake:</label>
</td>
<td>
<input id="basic" class="amountBox" data-var="basicCupcake" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>Standard Cupcake:</label>
</td>
<td>
<input id="standard" class="amountBox" data-var="standardCupcake" type="text" placeholder=0>
</td>
</tr>
<tr>
<td>
<label>Premium:</label>
</td>
<td>
<input id="premium" class="amountBox" data-var="premiumCupcake" type="text" placeholder=0>
</td>
</tr>
</table>
</fieldset>
<h3>TOTAL: $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>
//Prices
$(document).ready(function () {
var priceList = {
sixround : 39.95,
eightround : 45.95,
nineround : 52.95,
tenround : 60.95,
twelveround : 74.95,
fourteenround : 89.95,
sixsquare : 45.95,
eightsquare : 52.95,
ninesquare : 60.95,
tensquare : 74.95,
twelvesquare : 99.95,
fourteensquare : 116.95,
quarterSheet : 37.95,
halfSheet : 62.94,
fullSheet : 95.95,
basicCupcake : 2.25,
standardCupcake : 2.50,
premiumCupcake : 2.75
};
$('.amountBox').on('change', function(){
var value = $(this).val();
var price = priceList[$(this).data('var')];
$(this).val((value*price).toFixed(2));
$('#total').val('0');
$('.amountBox').each(function(){
if(!isNaN(parseFloat($(this).val()))){
$('#total').val((parseFloat($('#total').val()) + parseFloat($(this).val())).toFixed(2));
}
});
});
});
When you are calculating the new value, just do something like:
$("#8square").keyup(function() {
var eights = $("#8square").val();
var oldValue = $("#total").val();
$("#total").val(parseInt(oldValue) + parseInt((eightsquare * eights).toFixed(2)));
});
However, this assumes they enter in all the correct values the first time. Have some way to subtract from the total should they remove their choice and make a new one.
Check the following demo: http://jsbin.com/yobeyonuju/1/
function getRes(){
total = document.getElementById('total');
total.value=0;
f = document.getElementById('calculator');
inputs = f.getElementsByTagName('input');
res = 0;
for (i = 0; i < inputs.length; i++){
if (!isNaN(inputs[i].value*1)) res += inputs[i].value*1;
}
total.value = res;
}
It is clear that isNaN for exclude any inputs such as submit without numerical values. In the demo I called it from javascript hyper link as
TOTAL:
You're updating the value of #total with only the value of the form field that's being changed... you need to give all of your form fields a class and then add the sum of all fields every time one of them changes. It's also better to use change instead of keyup so you get the total only when the input is changed and out of focus.
$(".subtotal").change(function () {
$("#total").val(0);
var sum = 0;
$('.subtotal').each(function () {
sum += Number($(this).val());
});
$("#total").val(sum.toFixed(2));
});
JSFiddle
I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)
For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/
Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);
Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.