Live calculation on jquery change

We are using following fields to do some calculation.

$(document).ready(function(){
$('.num').blur(funct开发者_JS百科ion () {
var amount    = parseInt($('#amount').val()) || 0;
var openbal = parseInt($('#openbal').val());
var disc    = parseInt($('#disc').val());
var netpay  = fees+openbal-disc || 0;
$('#netpay').val(netpay);
});
});

And here is html code

 <select name="product" class="product">
   <option selected>Select product</option>
   <option>Product1</option>
   <option>Product2</option>
 </select>
<input type="text" size="30" name="amount" class="num" id="amount" />
<input type="text" class="num" name="openbal" value="0" id="openbal" />
<input type="text" class="num" name="disc" value="0" id="disc" />
<input type="text" name="netpay" id="netpay" />

So What we are doing here is...

1. Select product from drop down list and fetch amount(#amount) using ajax.
2. We are doing calculation using .num(class) like given discount or any pending balance.

Our code is working fine, but it only updates netpay(#netpay) when we blur on any .num field and it updates calculation. But we would like to do calculation after amount receives its value and even should update netpay(#netpay) if we updates any of num(.num) field, for example we give discount(#disc) 500, so netpay(#netpay) should be updated.

thanks for your support.

The easiest way would be to raise the blur event once you set the value for #amount.

So in your success handler for the Ajax call, do something like:

$('#amount').val('newValue').blur();

As the blur event handler is also bound to #amount, raising the event will execute it (but you could use any other element the handler is bound to).

Unfortunately, setting the value of a text input element with .val() does not raise the change event.

Further remarks:

If you use parseInt, make sure you pass the right radix as second parameter. So it should be parseInt($('#amount').val(), 10). Otherwise, if someone inputs a number with leading 0s, the value is parsed as octal value. If the values are plain numbers without any suffix, you can also parse the string as number by just prepending +:

var amount = +$('#amount').val() || 0,
    openbal = +$('#openbal').val() || 0,
    disc  = +$('#disc').val() || 0,
    netpay  = fees + openbal - disc;
$('#netpay').val(netpay);

Do you mean that it doesn't update as you are typing into the num inputs?

Consider separating your calculation function out and calling it from different events.

function doCalc() {
    var fees    = 0; // <-- is undefined in your example
    var amount  = parseInt($('#amount').val()) || 0;
    var openbal = parseInt($('#openbal').val());
    var disc    = parseInt($('#disc').val());
    var netpay  = fees + openbal - disc || 0;
    $('#netpay').val(netpay); // <-- the result is not going anywhere
}

$(function(){
    $('.num')
        .blur(doCalc) // keeping your original event
        .keydown(doCalc) // also updating as they type
        .change(doCalc) // also update if value changes
        ;
});

I didn't test this. I'm guessing whether this is what you're after.

Try to use this:

$('#amount').blur(function ()

instead of this:

 $('.num').blur(function ()