i am trying to calculate the total price for each new item added. I have created an onchange function that will calculate the total price based on the quantity inputted by the user, so every time the user changes the quantity, the price changes. I have tried running my code however it doesn't seem to be calculating and displaying the total in its corresponding text box.
function getTotal($i){
var price = document.getElementById('priceper_'+$i+'').value;
var per_pack = document.getElementById('per_pack_'+$i+'').value;
var quantity = document.getElementById('quantity_'+$i+'').value;
document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity);
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_0" id="description_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" size="15" maxlength="9" value="" /></td>
</tr>
<?php
for($i=1; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="getTotal('.$i.');" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
</table>
Something like this
function getTotal() {
var total = 0;
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
var price = document.getElementById('priceper_'+i).value;
var per_pack = document.getElementById('per_pack_'+i).value;
var quantity = document.getElementById('quantity_'+i).value;
var subtotal = (price/per_pack)*quantity;
document.getElementById('subtotal_'+i).value=subtotal.toFixed(2);
total+=subtotal;
}
document.getElementById("total").value=total.toFixed(2);
}
window.onload=function() {
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
document.getElementById('quantity_'+i).onkeyup=getTotal;
}
getTotal();
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<!-- here you loop in your PHP from 0 to 9 if you want 10 fields -->
<tr class="multipp">
<td><input type="text" name="description_0" id="description_'" size="85" maxlength="70" value="desc 0" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="11" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="1" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_1" id="description_1" size="85" maxlength="70" value="desc 1" /></td>
<td><input type="text" name="priceper_1" id="priceper_1" size="10" maxlength="9" value="22" /></td>
<td><input type="text" name="per_pack_1" id="per_pack_1" size="10" maxlength="9" value="2" /></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_1" id="subtotal_1" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr><td colspan=4> </td><td><input type="text" id="total" value="0.00" />
</table>
The PHP:
<?php
for($i=0; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
Related
$(".clues_container_h").append("<div class='enuns'><p id='enunH-" + i + "'>" + i + enun_h_arr[i] + "</p></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//part of the table:
<table id="navigate" class="tblnavigate">
<tbody>
<tr>
<td class="numbers"></td>
<td class="numbers">1</td>
<td class="numbers">2</td>
<td class="numbers">3</td>
<td class="numbers">4</td>
<td class="numbers">5</td>
<td class="numbers">6</td>
<td class="numbers">7</td>
<td class="numbers">8</td>
<td class="numbers">9</td>
<td class="numbers">10</td>
<td class="numbers">11</td>
</tr>
<tr>
<td class="numbers">1</td>
<td><input id="cell-0" autocomplete="off" name="cell-0" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-1" autocomplete="off" name="cell-1" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-2" autocomplete="off" name="cell-2" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-3" autocomplete="off" name="cell-3" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-4" autocomplete="off" name="cell-4" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-5" autocomplete="off" name="cell-5" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-6" autocomplete="off" name="cell-6" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-7" autocomplete="off" name="cell-7" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-8" autocomplete="off" name="cell-8" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-9" autocomplete="off" name="cell-9" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-10" autocomplete="off" name="cell-10" onkeypress='validate(event)' type="text" maxlength="1"></td>
</tr>
</table>
If i click on any input (square) all the inputs (that belongs to the word) would change background color. How can i achieve this?
I have made an invoice form.. everything is working but sum of all product price is showing wrong. I am not very good with the Javascript. Need Your help.
js for total sum:
<script type="text/javascript">
window.sumInputs = function() {
var inputs = document.getElementsByTagName('input'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}
}
result.value = sum;
}
</script>
html table:
Here I have declared my id's for my calculations. This
is working well.
<table>
<tr>
<td><input type="text" class="street" class="menu_name" name="user[0][name]" value=""></td>
<td><input type="text" id="q2" name="user[0][age]" value=""></td>
<td><input type="text" id="q1" class="menu_price" name="user[0][address]" value=""><br></td>
<td><input type="text" id="t3" name="user[0][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street1" class="menu_name1" name="user[1][name]" value=""></td>
<td><input type="text" id="r2" name="user[1][age]" value=""></td>
<td><input type="text" id="r1" class="menu_price1" name="user[1][address]" value=""><br></td>
<td><input type="text" id="t4" name="user[1][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street2" class="menu_name2" name="user[2][name]" value=""></td>
<td><input type="text" id="t2" name="user[2][age]" value=""></td>
<td><input type="text" id="t1" class="menu_price2" name="user[2][address]" value=""><br></td>
<td><input type="text" id="t7" name="user[2][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street3" class="menu_name3" name="user[3][name]" value=""></td>
<td><input type="text" id="h2" name="user[3][age]" value=""></td>
<td><input type="text" id="h1" class="menu_price3" name="user[3][address]" value=""><br></td>
<td><input type="text" id="t8" name="user[3][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street4" class="menu_name4" name="user[4][name]" value=""></td>
<td><input type="text" id="y2" name="user[4][age]" value=""></td>
<td><input type="text" id="y1" class="menu_price4" name="user[4][address]" value=""><br></td>
<td><input type="text" id="t9" name="user[4][email]" value=""></td>
</tr>
<tr><td>Total : <input type="text" name="total" id="total"/>
Sum //Here is my problem it's not showing correct value
</td>
</tr>
<?php echo form_submit($submit);?>
</table>
Here is a JSFiddle
I have made some changes. Actually the js is adding up all the inputs value. But you require only the value of price input.
http://fiddle.jshell.net/h9753snz/
my problem is that my smarty script wont work when appending it to the DOM using after() jquery, I use this script when user tries to add new item and just by inserting it after the last table row.
in PHP
var smartyFetchItem = '{section name=cnt loop=$ItemsVal}<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>{/section}';
$('tbody.tbodyruler tr:last').after('<tr><td><input type="hidden" id="ds" name="itemname[]"><select class="itemanm"><option value="others">If Others - Please fill up add info</option>'+smartyFetchItem+'</select></td><td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td><td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td><td></td><td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td><td></td><td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td></tr>');
in TPL
<tbody class="tbodyruler">
{section name=count loop=$counter}
<tr>
<td><input type="hidden" id="ds" name="itemname[]">
<select class="itemanm">
<option value="others">If Others - Please fill up add info</option>
{section name=cnt loop=$ItemsVal}
<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>
{/section}
</select>
</td>
<td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td>
<td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td>
<td></td>
<td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td>
<td></td>
<td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td>
</tr>
{/section}
Try This
var smartyFetchItem = '';
{section name=cnt loop=$ItemsVal} {literal}
smartyFetchItem = smartyFetchItem + '<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>';
{/section}
$('tbody.tbodyruler tr:last').after('<tr><td><input type="hidden" id="ds" name="itemname[]"><select class="itemanm"><option value="others">If Others - Please fill up add info</option>'+smartyFetchItem+'</select></td><td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td><td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td><td></td><td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td><td></td><td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td></tr>');
Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...
try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle
Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?
$('#idOfTextBox').val(sum.toFixed(2));
the third JS function changes comma to dot on the existing rows, but when I add new row with the first function it doesn't work on the new rows. How can I correct this?
<script type="text/javascript">
$(document).ready(function()
{
$("#addPurchase").click(function()
{
$("#tablePurchases tr:last").after('<tr>'+
'<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td>'+
'<td><input type="text" name="do[]" style="width:70px; text-align:right;" value="0.00" /></td>'+
'<td><input type="text" name="dds[]" style="width:50px; text-align:right;" value="0.00" /></td>'+
'</tr>');
});
$("#removePurchase").click(function(){
if($("#tablePurchases tr").length>2) { $("#tablePurchases tr:last").remove();total(); };
});
$("#tablePurchases td:nth-child(2)").on('keyup',function(){
$(this).children().val($(this).children().val().replace(",", "."));
});
});
</script>
Add/
Remove<br />
<table style="font-family:'Book antiqua';" id="tablePurchases"><tbody>
<tr align="center">
<th>Field1</th>
<th>Field2</th>
<th>Field3</th>
</tr>
<tr>
<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td>
<td><input type="text" name="do[]" style="width:70px; text-align:right;" value="0.00" /></td>
<td><input type="text" name="dds[]" style="width:50px; text-align:right;" value="0.00" /></td>
</tr>
<tr>
<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td>
<td><input type="text" name="do[]" style="width:70px; text-align:right; " value="0.00"/></td>
<td><input type="text" name="dds[]" style="width:50px; text-align:right; " value="0.00"/></td>
</tr>
</table>
When binding events to dynamically created elements, you need to use .on()'s delegated syntax.
Change:
$("#tablePurchases td:nth-child(2)").on('keyup',function(){
$(this).children().val($(this).children().val().replace(",", "."));
});
to:
$('table').on('keyup', '#tablePurchases td:nth-child(2)', function(){
$(this).children().val($(this).children().val().replace(",", "."));
});