facing issue while doing calculation inside HTML table

Question

I have a dynamic HTML tbody which I am creating on change event of a select option, so in my table, I have 3 input fields

ItemName which is autocomplete I am using jquery UI for that, So when the user selects any itemName I am populating that ItemName's data to corresponding fields of a table, all data I have is in JSON format
then a user goes to next input field i.e UnitQty and enters something and on focus out of that I am doing some calculation
Then the last input field is Disc% here I am doing 2-3 things, when a user enters some input and press enter I am creating new row same as above with same functionality and some calculations are done and showed in a footer row I have named as Total
When user want to create new row then only he/she will press enter otherwise user press tab and focus out from the Disc% and same calculation I am doing

What my issue is

When user enters some data inside Disc% and press tab I am calling a function to calculate the data, suppose some times user by mistake press tab and want to go back to Disc% and create new row, so when I go back to Disc% by pressing right Shift+tab it doses some calculation as the function calcDiscount runs again, sometimes if I goo back to edit the Disc% field then also it runs the function calcDiscount
Also sometimes used by mistake put leave some field empty in table's input field I have tried to alert whenever the user leaves any empty field, but that too is not helping out

Please check out fiddle I am doing like below

$(document).keypress(function (event) {

    const row = event.target.parentElement.parentElement

    var keycode = event.keyCode || event.which;
    if (keycode == '13') {

        if (event.target.matches('[name=discPercentagetd]')) {
            calcDiscount(event.target.parentElement.parentElement)
            if ($(row).parent().find('tr').length - $(row).index() === 1) {
                rowappend(event.target.parentElement.parentElement.parentElement)
            }
        }
    }
});
document.addEventListener("keydown", function (event) {

    const row = event.target.parentElement.parentElement
    if (event.target.matches('[name=discPercentagetd]')) {

        var keycode = event.keyCode || event.which;
        if (keycode == '9') {


            calcDiscount(event.target.parentElement.parentElement)
        }
    }
});

Please check out my fiddle I have commented all the lines there

Note-: after entering DIsc% please go back to Disc% after focusing out using rightShift+tab and see the unitQty in footer it auto increases

@ShridharSharma I have already shard a link of my fiddle, please look carefully, due to some issue I have not attached snippet here, My fiddle -; https://jsfiddle.net/draj8126/wver49tj/ — manish thakur, Jun 26 '19 at 11:16

Shridhar Sharma · Accepted Answer · 2019-06-26T12:39:00.337

1

You need to set the all the values to 0 and then calculate the values by iterating through all the rows,

like this,

      total = 0;
      totalDiscountAmt = 0;
      totalGstAmt = 0;
      totalUnitQty = 0;
      subtotal = 0;
      $("#tableInvoice tbody tr").each(function() {
        if (!$(event.target).val()) {
          e.preventDefault();
          return;
        }
        calc(this)
        calcDiscount(this)
      })

see the updated fiddle here https://jsfiddle.net/pLcexr6t/

edited Jun 26 '19 at 12:39

answered Jun 26 '19 at 12:18

Shridhar Sharma

2,337
1
9
13

ok so you are saying, I should initialize all the value to 0 as it is taking previous values? – manish thakur Jun 26 '19 at 12:20
I've also implemented logic to prevent user from moving next until the values is filled in discount and qty inputs – Shridhar Sharma Jun 26 '19 at 12:21
hey same issue is there when i press enter after coming back as `right shift+tab` the `unit Qty` in total row (Footer) gets auto increased to double like when it is 4 so it increases to 8 – manish thakur Jun 26 '19 at 12:29
simply when I am pressing `e3nter` to create new row the footer data is increasing – manish thakur Jun 26 '19 at 12:30
You doing it some wrong way, as after discount% i am creating new row on press of enter why you doing like `if (event.target.matches('[name=discPercentagetd]') || e.target.matches('[name=unitQtytd]')) ` – manish thakur Jun 26 '19 at 12:31
let me check it fully – manish thakur Jun 26 '19 at 12:39
hey your updated fiddle doesn't work properly when i press enter inside `unitQty` than still it creates new row,please check once – manish thakur Jun 27 '19 at 05:17
Hey I have done almost every thing, here I have been stuck at only one place, when I am at `Disc%` and instead of tab if i click outside that input field it doesn't do the calculation, please check if you get some time – manish thakur Jun 27 '19 at 08:23
you need to use blur event on the `Disc% – Shridhar Sharma Jun 27 '19 at 16:49
hey if you get some time can you please check out this post https://stackoverflow.com/questions/56831552/how-to-auto-select-the-dropdown – manish thakur Jul 01 '19 at 09:26
sure buddy I'll do what I can – Shridhar Sharma Jul 01 '19 at 11:13
I've answered your question buddy, you may check – Shridhar Sharma Jul 01 '19 at 11:27

facing issue while doing calculation inside HTML table

1 Answers1