Jquery ParseInt does not work

Question

$('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 ?

`$(surcid)` matches which type of HTML element? And so, what returns `$(surcid).val()`?!... — A. Wolff, Nov 25 '17 at 09:37
Include some HTML as it's relevant here, preferably make a snippet. See [mcve] — freedomn-m, Nov 25 '17 at 09:38
I have edited the question and added the HTML and more JS. Hoping somebody can help. — user3526204, Nov 25 '17 at 11:28
Please show the generated HTML, not the PHP code (right click-->view page source). — JJJ, Nov 25 '17 at 11:28
@jjj it view page source is quite long. Can I post it here or will I be reorimanded for that ? — user3526204, Nov 25 '17 at 11:31
... not *all* of it, just the relevant part, the same part you now have as PHP code. — JJJ, Nov 25 '17 at 11:32
@A.Wolff $(surcid) is number type and is supposed to return a number — user3526204, Nov 25 '17 at 11:42
@panther $(surcid) is the value of surcharge column which is number type — user3526204, Nov 25 '17 at 11:51
@user3526204: uhhh. Sorry, if anyone doesn't know how the hell looks, there is an example. — pavel, Nov 25 '17 at 11:54
@user3526204: sorry, when I saw st. like `for(var c=1;c < rate;c++){var ratec='rate'+c; ...` I've no reason to debug the rest of your code. — pavel, Nov 25 '17 at 11:58
@panther I am a novice at JS / JQUERY.... would be greatly obliged if you could tell me how to get surcid be calculated as a number like all other variables are getting calculated... — user3526204, Nov 25 '17 at 12:00
I am at my wits end from last two days...just figuring this out — user3526204, Nov 25 '17 at 12:02

score 1 · Accepted Answer · answered Nov 25 '17 at 23:31

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.

Thanks tons and tons freedomn-m !!! You opened a plethora of information to me ! This is real effort seen at SO to address an issue after a long time ! Thanks again. — user3526204, Nov 26 '17 at 21:09

score 0 · Answer 2 · answered Nov 25 '17 at 12:20

I haven't found the origin of the problem. But I have found the problem and the solution. I found that the variable $(surcv) was outputting blank. So I just added

if(surcv===''){surcv=0;}

This solved my issue. Now the calculation is perfect.

Anyway, thanks to all those who put in efforts to help me.

Jquery ParseInt does not work

2 Answers2