如何根据onkeypress文本框中的给定值计算价格，小计和总计？

Question

I have 4 textboxes, based on the given value I need to calculate everything on keyup functionality. I have used for loop on textboxes and get the value how to calculate on keyup to get the next textbox in loop and append the value in subtotal and total also i have to calculate tax based given quantity and price amount, subtotal, total should be append.

<td width="20%">
    <input type="text" onKeyPress="return isNumberKey(event)"  class="" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
</td>
<td width="20%">
    <input type="text" class="" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
</td>
<td width="20%">
    <input type="text" class="" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
</td>
<td width="15%" colspan="1" valign="top">
    <input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
</td>
<div class="col-md-6 col-md-offset-6">
    <div class="col-md-7 text-right">
        <p>Subtotal</p>
    </div>
    <div class="col-md-5 text-center">
        <input type="text" class="dollar different_amt" readonly>
    </div>
    <div class="col-md-7 text-right">
        <p>Savings to Customer</p>
    </div>
    <div class="col-md-5 text-center">
        <input type="text" class="dollar different_amt" placeholder="Enter Amount...">
    </div>
    <div class="col-md-7 text-right">
        <p><strong>Grand Total</strong></p>
    </div>
    <div class="col-md-5 text-center">
        <input type="text" class="dollar different_amt bald" readonly>
    </div>
</div>


var quantity = document.getElementsByName("quan[]");
var unit_level = document.getElementsByName("unit[]");
var tax = document.getElementsByName("tax[]");  

for ( var i = 0; i < quantity.length; i++ ){
    $(quantity[i]).on("keyup blur",function(){

        var get_val_quant = $(this).val();

        if($(this).val()==0){
            //alert("value should be greater than zero");
            document.getElementById('quantity_error').innerHTML="Please enter number greater than zero"; 
            $("#quantity_error").removeClass('field_validation_error hidden');
            $("#quantity_error").addClass('field_validation_error');
            return false;
        } else {
            document.getElementById('quantity_error').innerHTML=""; 
            $("#quantity_error").removeClass('field_validation_error');
            $("#quantity_error").addClass('field_validation_error hidden');
        }
    })

    //console.log(unit_level[i]);
    $(unit_level[i]).on("keyup blur",function(){                
        var get_unit_price = $(this).val();
        if($(this).val()==0){
            //alert("value should be greater than zero");
        document.getElementById('unit_error').innerHTML="Please enter number greater than zero"; 
            $("#unit_error").removeClass('field_validation_error hidden');
            $("#unit_error").addClass('field_validation_error');
            return false;
        } else if(get_unit_price!=0){
            alert((quantity[i]).value());
            return false;

        } else{
            document.getElementById('unit_error').innerHTML=""; 
            $("#unit_error").removeClass('field_validation_error');
            $("#unit_error").addClass('field_validation_error hidden');
        }
    });

    $(tax[i]).on("keyup blur",function(){               
        console.log($(this).val());
    });
}

JSFiddle

Answer 1

I have taken 2 static rows with unit,quantity,tax text boxes and last textbox is for total amount for each row. Whenever any changes in any of those 3values it will calculate related price and update in the last textbox And also subtotal,grandtotal with respect to the customer savings value(if any).

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>            
    <table>
        <tr>
            <td width="20%">
                <input type="text" class="key-up-event" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
            </td>
            <td width="20%">
                <input type="text" class="key-up-event" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
            </td>
            <td width="20%">
                <input type="text" class="key-up-event" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
            </td>
            <td width="15%" colspan="1" valign="top">
                <input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
            </td>
        </tr>
        <tr>
            <td width="20%">
                <input type="text" class="key-up-event" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
            </td>
            <td width="20%">
                <input type="text" class="key-up-event" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
            </td>
            <td width="20%">
                <input type="text" class="key-up-event" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
            </td>
            <td width="15%" colspan="1" valign="top">
                <input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
            </td>
        </tr>
    </table>
    <div class="col-md-6 col-md-offset-6">
        <div class="col-md-7 text-right">
            <p>Subtotal</p>
        </div>
        <div class="col-md-5 text-center">
            <input type="text" class="dollar different_amt" id="subttot" readonly>
        </div>
        <div class="col-md-7 text-right">
            <p>Savings to Customer</p>
        </div>
        <div class="col-md-5 text-center">
            <input type="text" class="dollar different_amt" id="savngs" placeholder="Enter Amount...">
        </div>
        <div class="col-md-7 text-right">
            <p><strong>Grand Total</strong></p>
        </div>
        <div class="col-md-5 text-center">
            <input type="text" class="dollar different_amt bald" id="fintot" readonly>
        </div>
    </div>
<script type="text/javascript">
    $(".key-up-event").on("keyup blur", function(){
        if ($(this).attr("name") == "quan[]") {
            var ind = $("input[name='quan[]']").index(this);                
        } else if ($(this).attr("name") == "unit[]") {
            var ind = $("input[name='unit[]']").index(this);
        } else if ($(this).attr("name") == "tax[]") {
            var ind = $("input[name='tax[]']").index(this);
        }

        var quan, unit, tax, amt;
        quan = parseFloat($("input[name='quan[]']:eq("+ind+")").val());
        quan = (isNaN(quan)) ? 0 : quan;
        unit = parseFloat($("input[name='unit[]']:eq("+ind+")").val());
        unit = (isNaN(unit)) ? 0 : unit;
        tax = parseFloat($("input[name='tax[]']:eq("+ind+")").val());
        tax = (isNaN(tax)) ? 0 : tax;
        amt = quan*unit + tax;

        $("input[name='amt[]']:eq("+ind+")").val(amt)

        subtotal();
    });

    function subtotal() {
        var tot = 0;
        $("input[name='amt[]']").each(function(){
            tot += parseFloat($(this).val());
        });
        $("#subttot").val(tot)
        finaltotal();
    }

    $("#savngs").on("keyup blur", function(){
        finaltotal();
    });

    function finaltotal() {
        var tot = 0;
        var subtot = parseFloat($("#subttot").val());
        subtot = (isNaN(subtot)) ? 0 : subtot;
        var savngs = parseFloat($("#savngs").val());
        savngs = (isNaN(savngs)) ? 0 : savngs;
        tot = subtot-savngs;
        $("#fintot").val(tot)
    }
</script>