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(",", "."));
});
Related
I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ
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>';
}
?>
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/
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));
I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>
First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.