OnChange событие повторяет вычисление после редактирования и то же поле

Question

У меня есть JavaScript, как показано ниже:

function calculateBill(id,price) 
{ 

var t = document.getElementById('total').value; 


var qty = document.getElementById('qty_'+id).value; 

var total = qty * price; 


var tcost = Number(t) + Number(total); 

document.getElementById('total').value = ''; 

//tcost = parseFloat(tcost); 

document.getElementById('total').value = tcost.toFixed(0) ; 
} 

Эта функция вызывается в OnChange событие <input type="text" id = "qty_<?php echo $i2; ?>" name="qty_<?php echo $i2; ?>" onchange="calculateBill('<?php echo $i2; ?>','<?php echo round($r2[$i2]['ret_price'],2); ?>')" /> Так как сво OnChange событие, он вычисляет общую стоимость, когда я измените значение. Теперь моя проблема в том, когда я хочу обновить ранее введенное значение, оно вычисляет новую сумму до общей суммы.

(Предположим, что предыдущее значение для количества 2, ставка составляет 5 так, общая

5 * 2 = 10

Следовательно, в общей сложности 10 из функции яваскрипта

Теперь, если я редактировать Quanity 1 , insted 5 * 1 = 5, я получу 10 + (5 * 1) = 15! ) Как я могу предотвратить это?

Answer 1

Есть скрытое поле

<input type="hidden" id="hidden_total"/> 

Сделать Скрытое значение поля, чтобы иметь начальное общее значение, когда форма загружена.

Теперь, внутри функции, используйте значение hidden_total для добавления и установки его в 0 после завершения вычислений.

function calculateBill(id,price) 
{ 
var t = document.getElementById('hidden_total').value; 
var qty = document.getElementById('qty_'+id).value; 
var total = qty * price; 
var tcost = Number(t) + Number(total); 
document.getElementById('total').value = tcost.toFixed(0) ; 
} 

Возможно, вам потребуется обновить значение скрытого поля после того, как вы вычислили, в зависимости от ваших потребностей. В этом случае добавьте следующее в последнюю строку;

document.getElementById('hidden_total').value = ''; 

Answer 2

Используйте скрытое значение для старого общего как

<input type="hidden" id="old_total" value="<?=$total?>"> 

Просто для использования вычисления идентификатора old_total

var t = document.getElementById('old_total').value; 

И для отображения выходного использования идентификатора total

document.getElementById('total').value = tcost.toFixed(0) ;