如何根据文本框中的给定值计算价格、小计和总额

how to calculate the price, subtotal and total based on given value in textbox onkeypress?

本文关键字：计算文本何根更新时间：2023-09-26

我有4个文本框，基于给定的值，我需要计算keyup功能的所有内容。我已经使用了文本框上的循环，并获得了如何在keyup上计算的值，以获得循环中的下一个文本框，并将值附加在小计和合计中。我还必须计算基于给定数量和价格的税收金额，小计和合计应被附加。

<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

我用unit,quantity,tax文本框取了两行静态，最后一个文本框是每行的总金额。每当这3个值中的任何一个发生任何变化时，它都会计算相关价格，并在最后一个文本框中更新。此外，还会根据客户节省的价值（如果有的话）进行小计和合计。

    <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>