计算字段的反向计算（覆盖）Javascript Jquery答案

【问题标题】：Reverse calculation on calculated fields (overwrite) Javascript Jquery计算字段的反向计算（覆盖）Javascript Jquery
【发布时间】：2017-07-15 20:34:49
【问题描述】：

我的页面上有以下产品信息。（见图）。

Product info image

Profit、GP%（毛利润）和 Mark Up % 字段最初为空。但是，当单击编辑按钮时，这些字段是根据价格、增值税率、案例成本、单位成本中的值（即时）计算填充的。

Product info image - after clicking edit

现在，当编辑“价格、案例成本或增值税率字段”时，利润、gp 和加价会相应调整（即编辑之前的空白字段）。

这是用于实现此功能的代码。

<script>
    function calculate()
    {
        //Fields that are used for calculations (declare variables)
        var casecost = parseFloat($('#q_casecost').val());
        var casesize = parseFloat($('#q_casesize').val());
        var price = parseFloat($('#q_sellprice').val());
        var profit = parseFloat($('#q_profit').val());    
        var unitcost = parseFloat($('#q_unitcost')); 
        var vatrate = parseFloat($('#vat_guid option:selected').text());  //dropdownlist            
        var markup = parseFloat($('#q_markup').val());                      

        //Calculations
        var unitcost = casecost / casesize; // get unitcost from casecost FIELD and casesize FIELD      

        var markuprate = ((price - unitcost) / unitcost) * 100;

        //var markupvalue = (markuprate / 100) * unitcost;

        var price = ((markuprate / 100) * unitcost) + unitcost;             

        var profit = (price - unitcost) - ((vatrate / 100) * price);

        var grossprofit = (profit / price) * 100;          

        //set results (calculations) to the updating fields
        if (isNaN(casecost) || isNaN(casesize) || isNaN(vatrate)) { return; }
        $('#q_casecost').val(casecost.toFixed(2)); 
        $('#q_unitcost').val(unitcost.toFixed(2));            
        $('#q_profit').val(profit.toFixed(2));
        $('#q_grossprofit').val(grossprofit.toFixed(2));            
        $('#q_sellprice').val(price.toFixed(2));
        $('#q_markup').val(markuprate.toFixed(2));             
    }               

    $(document).ready(function () {
        calculate(); // calculate on page load  

        //calculate every time these following fields change || monitor the fields that affect changes             
        $('#vat_guid').change(calculate); //dropdownlist value sent to calculate
        $('#q_casecost').change(calculate);
        $('#q_casesize').change(calculate);
        //$('#q_unitcost').change(calculate); //for REVERSE calculation of case cost
        $('#q_profit').change(calculate);
        $('#q_markup').change(calculate);
        $('#q_sellprice').change(calculate);             
        $(price).val(calculate);
        $(unitcost).change(calculate);
        $(profit).change(calculate);  
        $(markuprate).change(calculate);    
        //$(markupvalue).change(calculate);                        
    });
</script>

现在我要实现的下一个目标是能够在 MARK UP 字段中输入并相应地调整利润、gp 和 PRICE。例如，如果一个人想要查看他们应该收取什么价格，如果他们想要说 100% 加价，那么相应地更新价格字段。

目前，如果我在标记字段中输入任何值，它会恢复为计算值并且不会更改以影响价格。我已经根据此处代码中的加价计算了我的价格

 var price = ((markuprate / 100) * unitcost) + unitcost;

为了使这个功能成为可能，我缺少什么？

【问题讨论】：

如果我没弄错的话，如果价格改变，你想计算加价，如果加价改变，你想计算价格？目前，对于任何字段更改，您只有一个计算，您需要检测哪个字段发生更改，然后应用正确的计算。
当前您正在根据价格计算加价，然后根据刚刚计算的加价计算价格。这就是为什么更改标记率输入不会做任何事情的原因。您需要检查哪个输入发生了变化，然后按价格计算加价率或按加价率计算价格。
感谢@Danmoreng 的提示，我能够将价格计算包含在这个 $('#q_markup').change(function calculate() { });它奏效了。
在你的标题中，你是指Override还是Overwrite？
覆盖是我的意思！

标签： javascript jquery calculated-field

【解决方案1】：

供将来参考，这可能会帮助遇到此问题的人。

内

function calculate()
 {
   ----
 }

在末尾/底部（项目的顺序似乎对 jquery 很重要），在将原始计算设置为更新字段后，我为 mark_up 文本框添加了一个更改的（事件）函数，如下所示 - 然后该更改的事件更新其适当的具有新更新/计算的文本框

//REVERSE CALCULATIONS
            //calculate new price, profit and GP, WHEN NEW MARKUP VALUE IS TYPED
            $('#q_markup').change(function calculate() {

                var markuprateChanged = parseFloat($('#q_markup').val());
                //alert("Mark up rate changed to " + markuprateChanged);
                var price = ((markuprateChanged / 100) * unitcost) + unitcost;
                $('#item_q_sellprice').val(price.toFixed(2));
                //alert("Price is " + price);

                var newPrice = parseFloat($('#item_q_sellprice').val());
                var profitChanged = (newPrice - unitcost) - ((vatrate / 100) * newPrice);
                //alert("Profit is " + profitChanged);
                $('#q_profit').val(profitChanged.toFixed(2));

                var newGrossProfit = (profitChanged / newPrice) * 100;
                //alert("Grossprofit changed to " + newGrossProfit);
                $('#q_grossprofit').val(newGrossProfit.toFixed(2));
            });

因此可以更改价格，它将更新标记和其他适当的字段，然后如果更改标记，它将反向计算价格和其他适当的字段。

完整代码如下，可以看到这个函数是在哪里添加的

<script>
        function calculate()
        {
            //Fields that are used for calculations (declare variables)
            var casecost = parseFloat($('#item_Casecost').val());
            var casesize = parseFloat($('#item_Casesize').val());
            var price = parseFloat($('#item_q_sellprice').val());
            var profit = parseFloat($('#q_profit').val());
            var unitcost = parseFloat($('#q_unitcost').val());
            var vatrate = parseFloat($('#vat_guid option:selected').text());  //dropdownlist
            var markuprateChanged = parseFloat($('#q_markup').val());

            //Calculations
            var unitcost = casecost / casesize; // get unitcost from casecost FIELD and casesize FIELD

            var markuprate = ((price - unitcost) / unitcost) * 100;

            //var markupvalue = (markuprate / 100) * unitcost;

            //var price = ((markuprateChanged / 100) * unitcost) + unitcost;
            var price = parseFloat($('#item_q_sellprice').val());
            //alert("Price is " + price);

            var profit = (price - unitcost) - ((vatrate / 100) * price);

            var grossprofit = (profit / price) * 100;

            //set results (calculations) to the updating fields
            if (isNaN(casecost) || isNaN(casesize) || isNaN(vatrate)) { return; }
            $('#item_Casecost').val(casecost.toFixed(2));
            $('#q_unitcost').val(unitcost.toFixed(2));
            $('#q_profit').val(profit.toFixed(2));
            $('#q_grossprofit').val(grossprofit.toFixed(2));
            $('#item_q_sellprice').val(price.toFixed(2));
            $('#q_markup').val(markuprate.toFixed(2));

            //REVERSE CALCULATIONS
            //calculate new price, profit and GP, WHEN NEW MARKUP VALUE IS TYPED
            $('#q_markup').change(function calculate() {

                var markuprateChanged = parseFloat($('#q_markup').val());
                //alert("Mark up rate changed to " + markuprateChanged);
                var price = ((markuprateChanged / 100) * unitcost) + unitcost;
                $('#item_q_sellprice').val(price.toFixed(2));
                //alert("Price is " + price);

                var newPrice = parseFloat($('#item_q_sellprice').val());
                var profitChanged = (newPrice - unitcost) - ((vatrate / 100) * newPrice);
                //alert("Profit is " + profitChanged);
                $('#q_profit').val(profitChanged.toFixed(2));

                var newGrossProfit = (profitChanged / newPrice) * 100;
                //alert("Grossprofit changed to " + newGrossProfit);
                $('#q_grossprofit').val(newGrossProfit.toFixed(2));
            });
        }

        $(document).ready(function () {
            calculate(); // calculate on page load

            //calculate everytime these following fields change || monitor the fields that affect changes
            $('#vat_guid').change(calculate); //dropdownlist value sent to calculate
            $('#item_Casecost').change(calculate);
            $('#item_Casesize').change(calculate);
            //$('#q_unitcost').change(calculate); //for REVERSE calculation of case cost
            $('#q_profit').change(calculate);
            $('#q_markup').change(calculate);
            $('#item_q_sellprice').change(calculate);
            //$(price).val(calculate);
            $(unitcost).change(calculate);
            $(profit).change(calculate);
            $(markuprate).change(calculate);
            //$(markupvalue).change(calculate);
        });
    </script>

【讨论】：