jQuery counting percentage - shows "undefined"

Question

My script should counts values in table but it can't replace '%' char and shows 'undefined'. I tried some solution but no luck.

I made a fiddle: fiddle

    $('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {
        $('table tr').each(function() {
            var ilosc = $(this).find('input.ilosc').val();
            var cena_netto = $(this).find('input.cena_netto').val();
            var wartosc_netto = (ilosc * cena_netto);
            $(this).find('input.wartosc_netto').val(wartosc_netto);
            var stawka_vat = $(this).find('input.stawka_vat').val().replace('%', '');
            var  kwota_vat = ( wartosc_netto * (stawka_vat / 100) );
            $(this).find('input.kwota_vat').val(kwota_vat);
            var wartosc_brutto = (wartosc_netto + kwota_vat);
            $(this).find('input.wartosc_brutto').val(wartosc_brutto);
        }); //END .each
    return false;
}); // END change

It works fine until line: $(this).find('input.wartosc_netto').val(wartosc_netto);

It's not, probably I need to parseInt it but it shows "undefined" just after "replace". But I don't know why... — joryl, Feb 02 '16 at 11:21
Set ilosc and cena_netto first to INT and then make the calculation. You cannot have a formula on not-INT values — Alvin Bakker, Feb 02 '16 at 11:25
Thank you Alvin for help but look, that works fine: https://jsfiddle.net/tnua2eLk/3/ First problem is when I use "replace". — joryl, Feb 02 '16 at 11:29
A value that has a % is never an INT. Do a parseInt after removing the % — Alvin Bakker, Feb 02 '16 at 11:45
I know that it isn't INT but "replace" makes a problem for now. Look, please https://jsfiddle.net/tnua2eLk/4/ Alert doesn't work because of replace. But I don't know why that "replace" makes a problem... — joryl, Feb 02 '16 at 12:03
See my answer below. If this is a solution to your problem, please tick it as the answer ;) — Alvin Bakker, Feb 02 '16 at 13:26

Alvin Bakker · Accepted Answer · 2016-02-02T13:41:49.673

1

I think I found it... You do an each on all <tr> rows. The first row is a header. So it will not find any values. Replace that row with <thead> and then the undefined error doesnt occur. When an error like this happens, the rest of the script will stop.

Even better is to give the <tr> a class and then loop through the classes.

Mind you, make a fall back, when no value is found BEFORE you do the replace

edited Feb 02 '16 at 13:41

answered Feb 02 '16 at 13:25

Alvin Bakker

1,456
21
40

You can't replace `` by ``, it needs more work than that. – Jordumus Feb 02 '16 at 13:32

Jordumus · Answer 2 · 2016-02-02T13:46:41.750

Alvin Bakker was close, but it needed a bit more tuning.

The problem is that you run over each row, including the header row. The header row doesn't contain the values you want, so it runs into an error, and javascript stops execution on errors.

A simple way to solve this, is by checking if you're in the header row:

  $('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {
        $('table tr').each(function() {

            //NEW CODE HERE:
            //Pseudo code: if this row contains <th>-elements, 
            //then don't bother with it and move on to the next row.
            if ($(this).find('th').length > 0)
               return;

            var ilosc = $(this).find('input.ilosc').val();
            var cena_netto = $(this).find('input.cena_netto').val();
            var wartosc_netto = (ilosc * cena_netto);
            $(this).find('input.wartosc_netto').val(wartosc_netto);
            var stawka_vat = $(this).find('input.stawka_vat').val().replace('%', '');
            var  kwota_vat = ( wartosc_netto * (stawka_vat / 100) );
            $(this).find('input.kwota_vat').val(kwota_vat);
            var wartosc_brutto = (wartosc_netto + kwota_vat);
            $(this).find('input.wartosc_brutto').val(wartosc_brutto);
        }); //END .each
    return false;
}); // END change

Alternative solution (inspired by comment of @SlashmanX)

You could also adapt your html a bit:

Put your first row in a <thead> element. Like this:

<table> 
    <thead>
        <tr>
            <th>Lp.</th>
            <th>Nazwa towaru lub usługi</th>
            <th>Jednostka</th>
            <th>Ilość</th>
            <th>Cena netto</th>
            <th>Wartość netto</th>
            <th>Stawka VAT</th>
            <th>Kwota VAT</th>
            <th>Wartość brutto</th>
        </tr>
    </thead>
    <!-- All data rows below -->
</table>

Then you can adapt your javascript like this:

 $('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {

        //Subtle difference in this line: Spot the '>' in the selector!
        $('table>tr').each(function() {
            var ilosc = $(this).find('input.ilosc').val();
            var cena_netto = $(this).find('input.cena_netto').val();
            var wartosc_netto = (ilosc * cena_netto);
            $(this).find('input.wartosc_netto').val(wartosc_netto);
            var stawka_vat = $(this).find('input.stawka_vat').val().replace('%', '');
            var  kwota_vat = ( wartosc_netto * (stawka_vat / 100) );
            $(this).find('input.kwota_vat').val(kwota_vat);
            var wartosc_brutto = (wartosc_netto + kwota_vat);
            $(this).find('input.wartosc_brutto').val(wartosc_brutto);
        }); //END .each
    return false;
}); // END change

Again: credit to SlashmanX for pointing this out.

@SlashmanX Not the way you think he can: inside the ``, he would need the `` he has now (see [Permitted content of thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead#Usage_context) ). And then he would also need a `` where he puts the content-rows, and then he can filter on only ``. — Jordumus, Feb 02 '16 at 13:42
But it's a simple change, and more semantically correct seeing as it is the head of the table. Simply replace his selector with `table tbody tr` — SlashmanX, Feb 02 '16 at 13:43
@SlashmanX Yes, I understand what you mean, and I edited my answer to point that out. :) — Jordumus, Feb 02 '16 at 13:47

jQuery counting percentage - shows "undefined"

2 Answers2