Jquery Attribute Selector not working on first change event

I have a table where I calculate total amount without tax of an item (Item Price * Quantity - Discount%).

On this total amount without tax, I have option to add either VAT or SAT or both. As I check the VAT amount, the Total Amount should be displayed in a textbox (Total Amount Without Tax + VAT/SAT). This functionality is implemented in calculateTotalBill() function. The problem is it displays NaN on very first change event of Checkboxes (VAT/SAT). On subsequent change events the function works fine.

Below is the snippet

    function getPrice(element) {
        var itemPrice = $(element).closest('tr').find('td:eq(1) input');
        $itemId = $(element).val();
        itemPrice.val(5);
        calculateAmount(element);
    }

    function calculateAmount(element) {
        var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val();
        var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val();
        var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val();
        var amount = $(element).closest('tr').find('td:eq(4) input');
        var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount) / 100);
        amount.val(calcAmount);
        calculateTotal();
    }

    function calculateTotal() {
        var sum = 0;
        $('#mptblBill tbody tr').each(function () {
            sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val());
        });
        $('#txtTotalWdoutTax').val(sum);
    }

    function calculateTax(element) {
        var amount = $('#txtTotalWdoutTax').val();
        var taxAmount = amount * parseFloat($(element).val()) / 100;
        if ($(element).is(":checked")) {
            $(element).closest('td').next('td').find('input').val(taxAmount);
        }
        else {
            $(element).closest('td').next('td').find('input').val(0);
        }
        calculateTotalBill();
    }

    function calculateTotalBill() {
        var amount = $('#txtTotalWdoutTax').val();
        var taxTotal = 0;
        $('#calcTable tbody tr').each(function () {
            var a = $(this).find('td:eq(1) input[name^="txt_"]').length;
            var b = $(this).find('td:eq(1) input[name^="txt_"]').val();
            if (a > 0) {
                taxTotal = parseFloat(taxTotal) + parseFloat(b);
            }
        });
        $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid">
    
    <tbody>
            
    <tr role="row" class="">
                <td>
                    <select onchange="getPrice(this);" id="ddlItemId_0">
                            <option value="1">Crocin Medicine</option>
                            <option value="3">DCold Total</option>
                            <option value="4">Rice</option>
                    </select>
                </td>
                <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td>
                <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td>
                <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td>
                <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td>
                <td><input type="button" class="width100" value="+" id="btnAdd_0"></td>
            </tr></tbody>
<thead>
        <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr>
    </thead>
</table>
<table id="calcTable" style="width:100%; margin-left:32%;">
    <tbody>
        <tr>
            <td colspan="6">
                <label class="pullRight">Total Amount Without Tax </label>
            </td>
            <td colspan="2">
                <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax">
            </td>
        </tr>
            <tr>
                <td colspan="6"> 
                    <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
                </td>
                <td colspan="2">
                    <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1">
                </td>
            </tr>
            <tr>
                <td colspan="6"> 
                    <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
                </td>
                <td colspan="2">
                    <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2">
                </td>
            </tr>
        <tr>
            <td colspan="6">
                <label class="pullRight">Total Amount </label>
            </td>
            <td colspan="2">
                <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal">
            </td>
        </tr>
    </tbody>
</table>

What am I doing wrong? Any help will be appreciated.

Answers 1

  • Try this

    function getPrice(element) {
            var itemPrice = $(element).closest('tr').find('td:eq(1) input');
            $itemId = $(element).val();
            itemPrice.val(5);
            calculateAmount(element);
        }
    
        function calculateAmount(element) {
            var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val();
            var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val();
            var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val();
            var amount = $(element).closest('tr').find('td:eq(4) input');
            var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount) / 100);
            amount.val(calcAmount);
            calculateTotal();
        }
    
        function calculateTotal() {
            var sum = 0;
            $('#mptblBill tbody tr').each(function () {
                sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val());
            });
            $('#txtTotalWdoutTax').val(sum);
        }
    
        function calculateTax(element) {
            var amount = $('#txtTotalWdoutTax').val();
            var taxAmount = amount * parseFloat($(element).val()) / 100;
            if ($(element).is(":checked")) {
                $(element).closest('td').next('td').find('input').val(taxAmount);
            }
            else {
                $(element).closest('td').next('td').find('input').val(0);
            }
            calculateTotalBill();
        }
    
        function calculateTotalBill() {
            var amount = $('#txtTotalWdoutTax').val()==''?0:$('#txtTotalWdoutTax').val();
            var taxTotal = 0;
            $('#calcTable tbody tr').each(function () {
                var a = $(this).find('td:eq(1) input[name^="txt_"]').length;
                var b = $(this).find('td:eq(1) input[name^="txt_"]').val();
                if (a > 0) {
                    taxTotal = parseFloat(taxTotal) + parseFloat(b==''?0:b);
                }
            });
            $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
        }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid">
        
        <tbody>
                
        <tr role="row" class="">
                    <td>
                        <select onchange="getPrice(this);" id="ddlItemId_0">
                                <option value="1">Crocin Medicine</option>
                                <option value="3">DCold Total</option>
                                <option value="4">Rice</option>
                        </select>
                    </td>
                    <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td>
                    <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td>
                    <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td>
                    <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td>
                    <td><input type="button" class="width100" value="+" id="btnAdd_0"></td>
                </tr></tbody>
    <thead>
            <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr>
        </thead>
    </table>
    <table id="calcTable" style="width:100%; margin-left:32%;">
        <tbody>
            <tr>
                <td colspan="6">
                    <label class="pullRight">Total Amount Without Tax </label>
                </td>
                <td colspan="2">
                    <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax">
                </td>
            </tr>
                <tr>
                    <td colspan="6"> 
                        <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
                    </td>
                    <td colspan="2">
                        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1">
                    </td>
                </tr>
                <tr>
                    <td colspan="6"> 
                        <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
                    </td>
                    <td colspan="2">
                        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2">
                    </td>
                </tr>
            <tr>
                <td colspan="6">
                    <label class="pullRight">Total Amount </label>
                </td>
                <td colspan="2">
                    <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal">
                </td>
            </tr>
        </tbody>
    </table>


Related Articles