Net amount not working in right way. Calculation gone wrong with javascript

Question

I am trying to make an invoice script. The calculation part doing with js. Gross amount and vat percentage entering manually. Vat amount is displaying fine. But the net amount addition is not working perfect. Codes below.

JS

$(document).on("change keyup blur", "#caVat", function() {
        var gross = $('#caGross').val();
        var vat = $('#caVat').val();            
        var dec = (vat / 100).toFixed(2); //its convert 10 into 0.10
        var mult = gross * dec; // gives the value for subtract from main value
        var discont = gross - mult; 
        var add = gross + mult;
        $('#caVatamnt').val(mult);
        $('#caNetamnt').val(add);
    });

HTML Code

                   <div class="form-row" style="padding-top: 10px;">
                                    <div class="col">
                                        <h5>Notes:</h5><textarea class="form-control" rows="8"></textarea>
                                    </div>
                                    <div class="col">
                                        <div class="box-bg">
                                            <div class="form-row text-dark">
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Gross amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="number" name="pogrossamount" id="caGross"></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">VAT (%):</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" name="povat" id="caVat" ></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">TAX Amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" name="potax" id="caVatamnt" readonly ></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Discount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="number" name="podiscount" ></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Net amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="number" name="ponetamount" id="caNetamnt" readonly ></div> 
                                                     </div>
                                                <div class="col text-right"> <input class= "genric-btn success circle arrow" type="submit" name="submit" value="submit"><a class="genric-btn warning circle arrow" role="button" style="padding-top: 6px;margin-top: 5px;margin-left: 10px;color: rgb(255,255,255);background: #032c71;" href="window.print();">Print</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

The resultenter image description here I am getting:

Thank you all for the support... I got the solution ... var add = +gross + +mult; — VSNAIR, May 09 '21 at 18:38

pall04 · Answer 1 · 2021-05-09T18:43:58.767

-2

Looks like it adds the values as text strings.

EDIT: My previous solution was flawed, correct way:

To produce a number from a string you can prepend it with +:

var add =   +gross + +mult;

edited May 09 '21 at 18:43

answered May 09 '21 at 18:11

pall04

23
7

`0 + "1" + "2"` returns `"012"`. And `"1".valueOf()` is still `"1"` – adiga May 09 '21 at 18:13
Thank you all for the support... I got the solution ... var add = +gross + +mult; – VSNAIR May 09 '21 at 18:39

Net amount not working in right way. Calculation gone wrong with javascript

1 Answers1