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

Question

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

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;

我缺少什么才能实现此功能？

Answer 1

为了将来参考，这可能会对遇到此问题的人有所帮助。

在

之内

function calculate()
 {
   ----
 }

在 end/bottom（项目的顺序似乎对 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>

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

Reverse calculation on calculated fields (overwrite) Javascript Jquery

javascript

jquery

calculated-field