$('document').ready(function(){
var totp=11;
var ids="";
for(var c=1;c < totp;c++){
var rateid='input#'+'rate'+c;
var qtyid='input#'+'qty'+c;
var discid='input#'+'disc'+c;
var surcid='input#'+'surc'+c;
var totid='input#'+'tot'+c;
var vatid='input#'+'vat'+c;
ids = ids + rateid+","+qtyid+","+discid+","+surcid+","+vatid+",";
var idsl=ids.replace(/,+$/,'');
$(idsl).keyup(function(){
calcTotal(totp);
});
}
// alert(idsl);
$('#addProd').click(function(){
$('#newProd').fadeIn('fast');
});
});
function calcTotal(rate){
var ftotv=0;
var fvatamt=0;
for(var d=1;d < rate;d++){
var rateid='input#'+'rate'+d;
var qtyid='input#'+'qty'+d;
var discid='input#'+'disc'+d;
var surcid='input#'+'surc'+d;
var totid='input#'+'tot'+d;
var vatid='input#'+'vat'+d;
var ratev=$(rateid).val();
var qtyv =$(qtyid).val();
var discv=$(discid).val();
var surcv=$(surcid).val();
//surcv=parseInt(surcv);
var totv=ratev * qtyv;
// alert(surcv);
var vatamt=totv*5/100;
var totd=totv-discv;
var totv=totd + surcv;
totv=parseInt(totv)+parseInt(vatamt);
$(totid).val(totv);
ftotv=ftotv+totv;
$(vatid).val(vatamt);
fvatamt=fvatamt+vatamt;
}
$(ftotvat).val(fvatamt);
$(ftotid).val(ftotv);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.newProd {
display: none
}
</style>
<form action='generateinvoice' method='POST'>
<input type='hidden' name='category' value='<br />
<b>Notice</b>: Undefined variable: cat in <b>C:\Program Files\EasyPHP-DevServer-14.1VC11\data\localweb\mechelec\Admin\addsale.php</b> on line <b>5</b><br />
'>
<div style="margin:0 auto">
<div style='margin-left:0;text-align:left'>
<div style='margin-top:30px;text-align:left'>ORDER</div><div class='company' style='margin-top:-20px'><div>
<h3>Company</h3>
<p>
<select name='CompanyId'><option value='3'>Silitech</option></select>
</p></div><div><h3>Purchase Order No</h3><p><input type='text' name='PurchaseOrderNo' style='width:150px' required></div></p><div><h3>Mode Of Payment</h3><p><input type='text' name='ModeOfPayment' required></div></p><p style='clear:both'></p></div> <div>PRODUCT</div><div><input type='hidden' name='InvoiceNo' style='width:150px'></div><br>
</div>
<div class='product'>
<span id='addProd'>Add Item</span><table><tr><th style='width:25%;'>Product Name</th><th style='width:5%'>Quantity</th><th style='width:10%'>Unit</th><th style='width:10%'>Rate</th><th style='width:10%'>Discount</th><th style='width:10%'>Surcharge</th><th style='width:10%'>VAT</th><th style='width:15%'>Total</th></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty1' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate1'required></td><td><input type='text' name='Discount[]' id='disc1'></td><td><input type='number' name='Surcharge[]' id='surc1'></td><td><input type='text' name='VAT[]' id='vat1'></td><td><input type='text' name='Total[]' id='tot1'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty2' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate2'required></td><td><input type='text' name='Discount[]' id='disc2'></td><td><input type='number' name='Surcharge[]' id='surc2'></td><td><input type='text' name='VAT[]' id='vat2'></td><td><input type='text' name='Total[]' id='tot2'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty3' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate3'required></td><td><input type='text' name='Discount[]' id='disc3'></td><td><input type='number' name='Surcharge[]' id='surc3'></td><td><input type='text' name='VAT[]' id='vat3'></td><td><input type='text' name='Total[]' id='tot3'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty4' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate4'required></td><td><input type='text' name='Discount[]' id='disc4'></td><td><input type='number' name='Surcharge[]' id='surc4'></td><td><input type='text' name='VAT[]' id='vat4'></td><td><input type='text' name='Total[]' id='tot4'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty5' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate5'required></td><td><input type='text' name='Discount[]' id='disc5'></td><td><input type='number' name='Surcharge[]' id='surc5'></td><td><input type='text' name='VAT[]' id='vat5'></td><td><input type='text' name='Total[]' id='tot5'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty6' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate6'required></td><td><input type='text' name='Discount[]' id='disc6'></td><td><input type='number' name='Surcharge[]' id='surc6'></td><td><input type='text' name='VAT[]' id='vat6'></td><td><input type='text' name='Total[]' id='tot6'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty7' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate7'required></td><td><input type='text' name='Discount[]' id='disc7'></td><td><input type='number' name='Surcharge[]' id='surc7'></td><td><input type='text' name='VAT[]' id='vat7'></td><td><input type='text' name='Total[]' id='tot7'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty8' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate8'required></td><td><input type='text' name='Discount[]' id='disc8'></td><td><input type='number' name='Surcharge[]' id='surc8'></td><td><input type='text' name='VAT[]' id='vat8'></td><td><input type='text' name='Total[]' id='tot8'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty9' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate9'required></td><td><input type='text' name='Discount[]' id='disc9'></td><td><input type='number' name='Surcharge[]' id='surc9'></td><td><input type='text' name='VAT[]' id='vat9'></td><td><input type='text' name='Total[]' id='tot9'></td></tr><tr>
<td>
<select name='ProductId[]'><option value='14'>Annealing Furnace</option><option value='13'>Gold Melting Furnace</option><option value='12'></option><option value='11'></option></select>
</td><td style='width:10%'><input type='text' name='Quantity[]' id='qty10' required></td><td style='width:10%'>
<select name='Unit[]'><option value='Piece'>Piece</option><option value='Box'>Box</option><option value='Kg'>Kg</option></select>
</td><td><input type='text' name='Rate[]' id='rate10'required></td><td><input type='text' name='Discount[]' id='disc10'></td><td><input type='number' name='Surcharge[]' id='surc10'></td><td><input type='text' name='VAT[]' id='vat10'></td><td><input type='text' name='Total[]' id='tot10'></td></tr><tr><td colspan='6'>Total</td><td><input type='text' name='ftotvat' id='ftotvat'></td><td><input type='text' name='ftotc' id='ftotid'></td></tr></table></div><div style='margin-top:20px;text-align:left'>DELIVERY</div><div class='challan'><div><h3>Delivery Challan No</h3><p><input type='text' name='DeliveryChallanNo' style='width:150px' required></p></div><div><h3>Destination</h3><p><input type='text' name='Destination' style='width:150px' required></p></div><div><h3>Dispatch Through</h3><p><input type='text' name='DispatchThrough' style='width:150px' required></p></div><p style='clear:both'></p></div><div><h3>Remarks</h3><div><textarea style='width:100%;height:100px' name='Remarks' required></textarea></div></div></div>
<input type='submit' name='addsub'></form>I am creating an invoice with columns of rate, quantity, VAT (tax), discount and Surcharge with 10 rows in the table.
When I make an input in each column, it has to calculate the final total at the end of the row.
Everything works fine except the $(surcid) as shown in the snippet which is the id of the input field for Surcharge
I have checked all possible FAQs on this but still getting stuck somewhere.
All variables calculate as expected. Except for surcv.
It gets concatenated.
What is wrong here ?
All variables calculate as expected. Except for surcv. It gets concatenated.
The issue is that .val() returns a string, as shown in this snippet:
var x=$("#in").val();
console.log(x === "1")
console.log(x === 1)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='in' value="1"/>If you use + on any value and a string, you get a string, eg:
var x = 1 + "2"
x==="12"
you fix this by converting the .val() to a number, there are many ways, including:
console.log(parseInt($("#num").val(), 10) === 1)
console.log(($("#num").val() * 1) === 1)
console.log(($("#num").val() - 0) === 1)
console.log(~~$("#num").val() === 1)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="num" type="number" value="1"/>(my personal preference is to use * 1 as too many people miss the ,10 on parseInt)
In fact, your code does this already, just after it's already concatenated the string, you just need to move this to when you read the value:
Relevant code from the question:
var ratev=$(rateid).val() * 1;
var qtyv =$(qtyid).val() * 1;
var discv=$(discid).val() * 1;
var surcv=$(surcid).val() * 1;
// All the above are now numbers, so can be manipulated fine.
var totv=ratev * qtyv;
var vatamt=totv * 5 / 100;
var totd=totv - discv;
var totv=totd + surcv;
$(totid).val(totv);
Your other values were working fine as they were manipulated as numbers (* / / / -) while + will manipulate as as a string as per above.