Обратный расчет по вычисляемым полям (перезапись) Javascript Jquery
У меня есть следующая информация о продукте на странице. (см. изображение).
Изображение информации о продукте
поля Profit, GP% (grossprofit) и Mark Up % изначально пустые. Но когда вы нажимаете кнопку "Изменить", эти поля вычисляются (на лету) и заполняются на основе значений в "Цена", "Норма НДС", "Стоимость случая", "Стоимость единицы".
Изображение информации о продукте - после нажатия изменить
Теперь при редактировании полей " Цена", " Стоимость дела" или "Ставка НДС " соответственно корректируются прибыль, 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;
Чего мне не хватает, чтобы сделать эту функцию возможной?
1 ответ
Для дальнейшего использования это может помочь кому-то, кто столкнется с этой проблемой.
В
function calculate()
{
----
}
в конце / внизу (порядок элементов, по-видимому, важен для jquery), после установки исходных вычислений для обновления полей я добавил функцию change (event) для текстового поля 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>