自动计算在JS中无效

Question

我正在设计发票表单，我要求用户添加，删除多个项目及其数量和价格。计算总项目，并应用总价格税额，它给出总计。我设法得到了正确计算的小计金额，但不知何故，在输入影响整个计算的税率后，税额没有计算出来。不知道我哪里出错了？ 以下是HTML：

<fieldset>

                        <legend>Invoice Detail</legend>
                        <div class='row'>
                            <div class='col-md-12'>
                                <table class="table table-bordered table-hover" id="invoiceTable">
                                    <thead>
                                        <tr>
                                            <th width="2%"><input id="check_all" class="formcontrol" type="checkbox" /></th>
                                            <th width="5%">Item No</th>
                                            <th width="38%">Item Name</th>
                                            <th width="15%">Packing</th>
                                            <th width="15%">Price</th>
                                            <th width="15%">Quantity</th>
                                            <th width="15%">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!--<tr>
                                            <td><input class="case" type="checkbox"></td>
                                            <td><input type="text" data-type="productCode" name="product_id[]" id="itemNo_2" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input type="text" data-type="productCode" name="product_packing[]" id="itemNo_2" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input type="text" data-type="productName" name="product_name[]" id="itemName_2" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input type="text" name="price[]" id="price_2" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="text" name="quantity[]" id="quantity_2" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="text" name="total[]" id="total_2" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                        </tr>-->
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-md-8">
                                        <button id="addmore" class="btn btn-success addmore" type="button">+ Add More</button>
                                        <button id="delete" class="btn btn-danger delete" type="button">- Delete</button>
                                    </div>
                                    <div class="col-md-4">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <br>
                    <fieldset>
                        <legend>Amount Detail</legend>
                        <div class="row">
                            <div class="col-md-8">
                            </div>
                            <div class="col-md-4">
                                <label><h4>Your Remarks</h4></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label>Past Due: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>
                                    <input type="text" name="due" id="due" class="form-control" value="" onchange="sumtotal();" ondrop="return false;" onpaste="return false;" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="due_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                    <!--<input type="text" name="due_notes" class="form-control" placeholder="Remarks Here" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" >-->
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label>Subtotal: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>

                                    <input type="text" class="form-control" name="invoice_subtotal" id="subTotal" placeholder="Subtotal" onchange="sumtotal();" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="subtotal_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Tax: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">%</span>

                                    <input type="text" class="form-control" name="tax_percent" id="tax2" placeholder="Tax" onkeyup="sumtotal();" required="true">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="tax_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Tax Amount: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>
                                    <input type="text" class="form-control" name="tax" id="taxAmount" placeholder="TaxAmount" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="tax_amount_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Bill Amount: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>

                                    <input type="text" class="form-control Bill Amount" name="amount_due" id="totalAftertax1" placeholder="Bill Amount" onKeyPress="return IsNumeric1(event);" ondrop="return false;" onpaste="return false;">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="bill_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                    <!--<input type="text" name="due_notes" class="form-control" placeholder="Remarks Here" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" >-->
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Total: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>
                                    <input type="text" class="form-control" name="invoice_total" id="totalAftertax" placeholder="TotalA" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="total_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Amount Paid: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>
                                    <input type="text" class="form-control" name="amount_paid" id="amountPaid" placeholder="Amount Paid" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required="true">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group" style="float:right;">
                                    <textarea type="text" name="amount_paid_notes" class="form-control" placeholder="Remarks Here" cols="30" rows="1"></textarea>
                                    <!--<input type="text" name="due_notes" class="form-control" placeholder="Remarks Here" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" >-->
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Amount Due: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" id="basic-addon1">Rs</span>

                                    <input type="text" class="form-control amountDue" name="amount_due" id="amountDue" placeholder="Amount Due" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <label>Payment Date: &nbsp;</label>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group mb-3">

                                    <input type="date" class="form-control amountDue" name="paymentdate">
                                </div>
                            </div>
                        </div>
                    </fieldset>

这是我写的javascript：

//adds extra table rows
var i=$('table#invoiceTable tr').length;
$("#addmore").on('click',function(){
    html = '<tr>';
    html += '<td><input class="case" type="checkbox"/></td>';
    html += '<td><input type="text" data-type="productCode" name="product_id[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productCode" name="product_packing[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productName" name="product_name[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';

    html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';

    html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';

    html += '</tr>';

    $('table#invoiceTable').append(html);
    i++;
});

//to check all checkboxes
$(document).on('change','#check_all',function(){
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$("#delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false); 
    calculateTotal();
});

//autocomplete script
/*
$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');

    if(type =='productCode' )autoTypeNo=0;
    if(type =='productName' )autoTypeNo=1;  

    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url : 'ajax.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,            
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itemName_'+id[1]).val(names[1]);
            $('#quantity_'+id[1]).val(1);
            $('#price_'+id[1]).val(names[2]);
            $('#total_'+id[1]).val( 1*names[2] );
            calculateTotal();
        }               
    });
}
*/
//price change
$(document).on('change keyup blur','.changesNo',function(){
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    quantity = $('#quantity_'+id[1]).val();
    price = $('#price_'+id[1]).val();
    if( quantity!='' && price !='' ) $('#total_'+id[1]).val( (parseFloat(price)*parseFloat(quantity)).toFixed(2) ); 
    calculateTotal();
});

$(document).on('change keyup blur','#tax',function(){
    calculateTotal();
});

//total price calculation 
function calculateTotal(){
    subTotal = 0 ; total = 0; pastdue = 0;

    $('.totalLinePrice').each(function(){
        if($(this).val() != '' )subTotal += parseFloat( $(this).val() );
    });
    $('#subTotal').val( subTotal.toFixed(2) );
    tax = $('#tax').val();
    if(tax != '' && typeof(tax) != "undefined" ){
        taxAmount = subTotal * ( parseFloat(tax) /100 );
        $('#taxAmount').val(taxAmount.toFixed(2));

        total = subTotal + taxAmount;
    }else{
        $('#taxAmount').val(0);
        total = subTotal;
    }
    $('#totalAftertax').val( total.toFixed(2) );
    calculateAmountDue();
}

$(document).on('change keyup blur','#amountPaid',function(){
    calculateAmountDue();
});

//due amount calculation
function calculateAmountDue(){
    amountPaid = $('#amountPaid').val();
    total = $('#totalAftertax').val();
    if(amountPaid != '' && typeof(amountPaid) != "undefined" ){
        amountDue = parseFloat(total) - parseFloat( amountPaid );
        $('.amountDue').val( amountDue.toFixed(2) );
    }else{
        total = parseFloat(total).toFixed(2);
        $('.amountDue').val( total );
    }
}


//It restrict the non-numbers
var specialKeys = new Array();
specialKeys.push(8,46); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode;
    console.log( keyCode );
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}

//datepicker
//$(function () {
  //  $('#invoiceDate').datepicker({});
//});


$(document).ready(function(){
    if(typeof errorFlag !== 'undefined'){
        $('.message_div').delay(5000).slideUp();
    }
});

请帮忙！

Answer 1

我在你的HTML代码中找不到id="tax"。你已经使用了

tax = $('#tax').val();

尝试替换为

tax = $('#tax2').val();

您将获得税额。