Calculate total, discount and tax amount through onkeyup function

mythri · September 16, 2014

Hello,

I am not very good at javascript.

Actually i have form like this

 <td> <input type="text" name="item[]" id="category" value="<?php echo $row1['item'];?>"  /></td>
 <td> <input type="text" name="uom[]" class="span2"  value="<?php echo $row1['uom'];?>"  /></td>
 <td> <input type="text" name="description[]" value="<?php echo $row1['description'];?>"  /></td>
 
 <td><input type="text" class="jQinv_item_qty span1" name="quantity[]"  /></td>
 
 <td><input type="text" class="jQinv_item_unit span1" name="price[]" value="<?php echo $row1['selling_price'];?>" /></td>
 

 <td><select name="tax[]" class="jQinv_item_tax span1">
 <option value="<?php echo $row1['tax'];?>"><?php echo $row1['tax'];?></option>
 <?php $l1 = mysql_query("select * from taxes") or die (mysql_error());
 while($l2 = mysql_fetch_array($l1))
 { ?>
 <option value="<?php echo $l2['rate']; ?>"> <?php echo $l2['name'];?> - <?php echo $l2['rate'];?>% </option>
 <?php } ?> </select></td>
 
 <td>
 <input type="text" class="jQinv_item_discount span1" name="discount[]"  value="<?php echo $row1['discount'];?>"  /></td>
 
<td><input type="text" class="jQinv_item_frt span1" name="freight[]"  placeholder="Freight"  /></td>
 
<td><input type="text" class="jQinv_item_frtax span1" name="freight_tax[]" placeholder="Frt Tax"   /></td>
 
<td><input type="text" class="jQinv_item_total span2" name="total[]"  /></td>

a =( ((Quantity * Price) - Discount) * (tax/100) )  + Freight + (Freight * (Freight tax/100))

I tried doing like this, But it did not work at all

 function rowInputs() {
            var balance = 0;
            var subTotal = 0;
            var taxTotal = 0;
            $(".invE_table tr").not('.last_row').each(function () {
                var $unit_price = $('.jQinv_item_unit', this).val();
                var $qty = $('.jQinv_item_qty', this).val();
                var $tax = $('.jQinv_item_tax', this).val();
var $discount = $('.jQinv_item_discount', this).val();
var $frt = $('.jQinv_item_frt', this).val();
var $frtax = $('.jQinv_item_frtax', this).val();
                
                var $total = (($unit_price * 1) * ($qty * 1))- $discount;
                var $tax_amount = (($total) *($tax/parseFloat("100")));
                var $total_amount = (($tax_amount) + ($frt)) + $frtax;
                
                
                var parsedTotal = parseFloat( ('0' + $total_amount).replace(/[^0-9-\.]/g, ''), 10 );
                var parsedTax = parseFloat( ('0' + $tax_amount).replace(/[^0-9-\.]/g, ''), 10 );
                var parsedSubTotal = parseFloat( ('0' + $total).replace(/[^0-9-\.]/g, ''), 10 );
                
                $('.jQinv_item_total',this).val(parsedTotal.toFixed(2));
                
                subTotal += parsedSubTotal;
                taxTotal += parsedTax;
                balance += parsedTotal;
                
            });
            var discount = parseFloat( ('0' + $('#inv_discount').val()).replace(/[^0-9-\.]/g, ''), 10 );
            var balance_disc = balance - discount;
            
            $(".invE_subtotal span").html(subTotal.toFixed(2));
            $(".invE_tax span").html(taxTotal.toFixed(2));
            $(".invE_discount span").html(discount.toFixed(2));
            $(".invE_balance span").html(balance_disc.toFixed(2));
        }

I am stuck here from past 2 days . Please somebody help me in this

CroNiX · September 16, 2014

It might be easier if you showed the raw, html output (source) of this page. We don't have access to your database/data. If we had the raw output it would be a lot easier to troubleshoot the jQuery.

mythri · September 16, 2014

Here is my raw html

   <table class="table invE_table">
                            <thead>
                                                <tr>
                                                   
                                                    <th>Item</th>
                                                    <th>UOM</th>
                                                    <th>Description</th>
                                                    <th>Qty</th>
                                                    <th>Price</th>
                                                    <th>Tax (%)</th>
                                                    <th>Discount</th>
                                                    <th>Freight</th>
                                                    <th>Frt Tax</th>
                                                    <th>Total ($)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="inv_row">
<form name="department" method="post" action="" enctype="multipart/form-data" onsubmit="return validate();" id="inv_form">
          
          <?php    
  $m1 = "select * from temp_order_line_items where order_id = '".$_SESSION['order_id']."'";
  $query1 = mysql_query($m1) or die (mysql_error());
   


while ($row1=mysql_fetch_array($query1))
{
 $tax = $row1['tax'];
if($tax == 5)
{
$tax_name = 'VAT';
}
else if($tax == 2)
{
$tax_name = 'CST';
}
else if($tax == 12.36)
{
$tax_name = 'Service';
}  
   


?>
                       


 <td> <input type="text" name="item[]" id="category" value="<?php echo $row1['item'];?>"  /></td>
 <td> <input type="text" name="uom[]" class="span2" id="category" value="<?php echo $row1['uom'];?>"  /></td>
 <td> <input type="text" name="description[]" id="category" value="<?php echo $row1['description'];?>"  /></td>


 <td><input type="text" class="jQinv_item_qty span1" name="quantity[]" id="category"  /></td>


 <td><input type="text" class="jQinv_item_unit span1" name="price[]" id="category" value="<?php echo $row1['selling_price'];?>" /></td>




 <td><select name="tax[]" class="jQinv_item_tax span1">
 <option value="<?php echo $row1['tax'];?>"><?php echo $row1['tax'];?></option>
 <?php $l1 = mysql_query("select * from taxes") or die (mysql_error());
 while($l2 = mysql_fetch_array($l1))
 { ?>
 <option value="<?php echo $l2['rate']; ?>"> <?php echo $l2['name'];?> - <?php echo $l2['rate'];?>% </option>
 <?php } ?> </select></td>


 <td>
 <input type="text" class="jQinv_item_discount span1" name="discount[]" id="category" value="<?php echo $row1['discount'];?>"  /></td>


<td><input type="text" class="jQinv_item_frt span1" name="freight[]" id="category" placeholder="Freight"  /></td>


<td><input type="text" class="jQinv_item_frtax span1" name="freight_tax[]" id="category" placeholder="Frt Tax"   /></td>


<td><input type="text" class="jQinv_item_total span2" name="total[]" id="category" value="<?php echo $row1['total'];?>"  /></td>


 <input type="hidden" name="del_date" id="category" value="<?php echo $row1['delivery_date'];?>"  />
 <input type="hidden" name="notes" id="category" value="<?php echo $row1['notes'];?>"  />
   






                    
<?php                     


}
echo '<td><input type="submit" name="save" id="save" value="UPDATE" class="btn btn-info" /></td>
</tr>
</tbody> 
  </table>


</form> </div>
</div>';

Edited September 16, 2014 by mythri

CroNiX · September 16, 2014

The WHOLE complete page. There aren't even any TR's in that.

mythri · September 16, 2014

I have updated the code.

mythri · September 16, 2014

Sorry for the mistake.

Please refer this updated html code

                        <div class="w-box-content">
                            <table class="table invE_table">
                            <thead>
                                                <tr>
                                                   
                                                    <th>Item</th>
                                                    <th>UOM</th>
                                                    <th>Description</th>
                                                    <th>Qty</th>
                                                    <th>Price</th>
                                                    <th>Tax (%)</th>
                                                    <th>Discount</th>
                                                    <th>Freight</th>
                                                    <th>Frt Tax</th>
                                                    <th>Total ($)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="inv_row">
<form name="department" method="post" action="" enctype="multipart/form-data" onsubmit="return validate();" id="inv_form">
          
          <?php    
				   $m1 = "select * from temp_order_line_items where order_id = '".$_SESSION['order_id']."'";
				   $query1 = mysql_query($m1) or die (mysql_error());
   

while ($row1=mysql_fetch_array($query1))
{
 $tax = $row1['tax'];
if($tax == 5)
{
	$tax_name = 'VAT';
	 }
else if($tax == 2)
{
	$tax_name = 'CST';
	 }
else if($tax == 12.36)
{
	$tax_name = 'Service';
	 }  
   
					
	?>
                       
 
 <td> <input type="text" name="item[]" value="<?php echo $row1['item'];?>"  /></td>
 <td> <input type="text" name="uom[]" class="span2" value="<?php echo $row1['uom'];?>"  /></td>
 <td> <input type="text" name="description[]" value="<?php echo $row1['description'];?>"  /></td>
 
 <td><input type="text" class="jQinv_item_qty span1" name="quantity[]"  /></td>
 
 <td><input type="text" class="jQinv_item_unit span1" name="price[]" value="<?php echo $row1['selling_price'];?>" /></td>
 

 <td><select name="tax[]" class="jQinv_item_tax span1">
 <option value="<?php echo $row1['tax'];?>"><?php echo $row1['tax'];?></option>
 <?php $l1 = mysql_query("select * from taxes") or die (mysql_error());
 while($l2 = mysql_fetch_array($l1))
 { ?>
 <option value="<?php echo $l2['rate']; ?>"> <?php echo $l2['name'];?> - <?php echo $l2['rate'];?>% </option>
 <?php } ?> </select></td>
 
 <td>
 <input type="text" class="jQinv_item_discount span1" name="discount[]"  value="<?php echo $row1['discount'];?>"  /></td>
 
<td><input type="text" class="jQinv_item_frt span1" name="freight[]" placeholder="Freight"  /></td>
 
<td><input type="text" class="jQinv_item_frtax span1" name="freight_tax[]" placeholder="Frt Tax"   /></td>
 
<td><input type="text" class="jQinv_item_total span2" name="total[]"  /></td>
 
 <input type="hidden" name="del_date" value="<?php echo $row1['delivery_date'];?>"  />
 <input type="hidden" name="notes" value="<?php echo $row1['notes'];?>"  />
   
 


                    
<?php                     
 
}
echo '<td><input type="submit" name="save" id="save" value="UPDATE" class="btn btn-info" /></td>
</tr>
</tbody>	
  </table>
 
</form> </div>
</div>';

CroNiX · September 16, 2014

Again, we need the SOURCE of the full rendered page, not your php. Go to the page in the BROWSER and click view source, and copy/paste the whole thing here.

mythri · September 16, 2014



 <table class="table invE_table">

                            <thead>

                                                <tr>


                                                    <th>Item</th>

                                                    <th>UOM</th>

                                                    <th>Description</th>

                                                    <th>Qty</th>

                                                    <th>Price</th>

                                                    <th>Tax (%)</th>

                                                    <th>Discount</th>

                                                    <th>Freight</th>

                                                    <th>Frt Tax</th>

                                                    <th>Total ($)</th>

                                                </tr>

                                            </thead>

                                            <tbody>

                                                <tr class="inv_row">

<form name="department" method="post" action="" enctype="multipart/form-data" onsubmit="return validate();" id="inv_form">




 <td> <input type="text" name="item[]" value="Test Item 1"  /></td>

 <td> <input type="text" name="uom[]" class="span2" value="kg"  /></td>

 <td> <input type="text" name="description[]" value="asdhavshfj jsfvhjsaf skjfvjhasdf kjsfgkjsdf ksgjfh"  /></td>


 <td><input type="text" class="jQinv_item_qty span1" name="quantity[]"  /></td>


 <td><input type="text" class="jQinv_item_unit span1" name="price[]" value="350" /></td>



 <td><select name="tax[]" class="jQinv_item_tax span1">

 <option value="5">5</option>

  <option value="5"> VAT - 5% </option>

  <option value="2"> CST - 2% </option>

  <option value="12.36"> Service - 12.36% </option>

  </select></td>


 <td>

 <input type="text" class="jQinv_item_discount span1" name="discount[]" value="0"  /></td>


<td><input type="text" class="jQinv_item_frt span1" name="freight[]" placeholder="Freight"  /></td>


<td><input type="text" class="jQinv_item_frtax span1" name="freight_tax[]" placeholder="Frt Tax"   /></td>


<td><input type="text" class="jQinv_item_total span2" name="total[]" /></td>


 <input type="hidden" name="del_date" value="0000-00-00"  />

 <input type="hidden" name="notes" value=""  />




</form>

</tr>

</tbody>

</table>

CroNiX · September 16, 2014

You are making this difficult to help you. To me, entire page means starting with <html> and ending with </html>. The code above does not contain these elements that you are using in your jQuery, so once again it's incomplete code:

$(".invE_subtotal span")
$(".invE_tax span")
$(".invE_discount span")
$(".invE_balance span")

mythri · September 17, 2014

Sorry, That code i can not put into my script as i can't put it in table format.

Here i have tried like this and it works too but as there is addition of multiple rows, it doesn't work then

if it is for single row it works. if there are multiple rows (added dynamically) it doesn't works for row2, 3...

here is my complete form

<input type="text" class="span2"  name="item[]" id="category" value="<?php echo $row1['item'];?>"  />  
  <input type="text" class="span1" name="uom[]" id="category" value="<?php echo $row1['uom'];?>"  />  
  <input type="text" name="description[]" id="category" value="<?php echo $row1['description'];?>"  />  
 
 <input type="text" class="span1" name="quantity[]" id="qty"  onkeyup="getValues(1)" />  
 
 <input type="text" class="span1" name="price[]" id="price" value="<?php echo $row1['selling_price'];?>" onkeyup="getValues(2)" />  
 
 <input type="text" class="span1" name="discount[]" id="discount" value="<?php echo $row1['discount'];?>" onkeyup="getValues(3)" />  
 <select name="tax[]" class="span1" id="tax" onkeyup="getValues(4)">
 <option value="<?php echo $row1['tax'];?>"><?php echo $row1['tax'];?></option>
 <?php $l1 = mysql_query("select * from taxes") or die (mysql_error());
 while($l2 = mysql_fetch_array($l1))
 { ?>
 <option value="<?php echo $l2['rate']; ?>"> <?php echo $l2['name'];?> - <?php echo $l2['rate'];?>% </option>
 <?php } ?> </select>  
 

 
<input type="text" class="span1" name="freight[]" id="freight" onkeyup="getValues(5)" placeholder="Freight"  />  
 
 
<input type="text" class="span2" name="total[]" id="total" />

and here is my java script

<script language="javascript">
function getValues(val){

var numVal1=parseInt(document.getElementById("qty").value);
var numVal2=parseInt(document.getElementById("price").value);
var numVal3=parseInt(document.getElementById("discount").value);
var numVal4=parseFloat(document.getElementById("tax").value);

var numVal5=parseFloat(document.getElementById("freight").value);


var sub_total = (numVal1 * numVal2) - numVal3;
var subt_tax =  sub_total * (numVal4/100);
var total = parseFloat(sub_total + subt_tax);
var totalValue = parseFloat(total + numVal5);

document.getElementById("total").value = totalValue;
}
</script>

mythri · September 17, 2014

Please can somebody help me in this.

Sign In

Calculate total, discount and tax amount through onkeyup function

Recommended Posts

mythri

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information