I'm coding a simple page to calculate values based on selecting options. I've faced a problem in calculation process, which is the result isn't instantly appear, But i should add a value to input like (0 or something else then delete it) to complete the calculate process, which isn't required it's optional if user have a balance. Maybe my details isn't enough but there is an example.
I would like to know what is wrong in my code.
$(document).ready(function(){
var vat = 15;
var price = 0;
var price_vat = 0;
$("#products").change(function(){
pk_vat = vat;
$("#products option:selected").each(function (){
pk_vat *= parseFloat($(this).data('price'));
price = parseInt($(this).data("price"));
price_vat = parseInt($(this).data("price"));
$("#cur_bal_b").on('input change keyup past', function(evt){
var value = evt.target.value
var current = parseFloat($(this).val());
var remaining = price - current;
var remaining_vat = ((price - current) * 14 / 100 );
if (value.length === 0) {
$("#rem_b").val(price);
$("#vat_rem_b").val(pk_vat.toFixed(2));
$("#tot_b").val((price + pk_vat).toFixed(2));
} else {
$("#rem_b").val(remaining);
$("#vat_rem_b").val(remaining_vat.toFixed(2));
$("#tot_b").val((remaining + remaining_vat).toFixed(2));
}
});
});
pk_vat = pk_vat / 100;
price_vat = price_vat + pk_vat;
$("#price_b").val(price);
$("#price_vat_b").val(price_vat.toFixed(2));
});
});table, td {border:1px solid #000;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><tr><td>Products Name</td><td>Price</td><td>Price & VAT</td><td>Current Balance</td><td>Remaining</td><td>VAT Remaining</td><td>Total</td></tr><tr><td><select id="products"><option id="b_0" value="" data-price="0">Please Select</option><option id="b_1" value="s_140" data-price="10.00">product a</option><option id="b_2" value="s_250" data-price="20.00">product b</option><option id="b_3" value="s_600" data-price="30.00">product c</option><option id="b_4" value="m_140" data-price="40.00">product d</option><option id="b_5" value="m_250" data-price="50.00">product e</option><option id="b_6" value="u_140" data-price="60.00">product f</option><option id="b_7" value="u_250" data-price="70.00">product g</option><option id="b_8" value="u_600" data-price="80.00">product h</option></select></td><td><input name="Price_B" type="text" id="price_b" value="0" disabled="disabled" /></td><td><input name="Price_Vat_B" type="text" id="price_vat_b" value="0" disabled="disabled" /></td><td><input class="cur_bal" name="Current_Balance" type="text" id="cur_bal_b" placeholder="Current Balance…" autocomplete="off" pattern="^[0-9]\d*$" /></td><td><input name="Remaining" type="text" id="rem_b" value="0" disabled="disabled" /></td><td><input name="Vat_Remaining" type="text" id="vat_rem_b" value="0" disabled="disabled" /></td><td style="width:100px;"><input name="Total_b" type="text" id="tot_b" value="0" disabled="disabled" /></td></tr></table>