Multiply two input field and result in the third field which changes when either of the input field changed with jQuery

Question

I need to Multiply two user Input Fields and show the results in the third field. The Result field must change when either of the User Input fields are changed.

<input type="number" name="rate" id="rate" />
<input type="number" name="box" id="box" />

The result should be in a third field which changes when either of the two above fields is changed. This totally depends on the user input

<input type="number" name="amount" id="amount" readonly />

I need to do this Multiplication with Jquery.

Thanks in advance

Answer 1

Try this : bind change event listener for rate and box input box and inside it multiply the values to put it in amount input.

$('#rate, #box').change(function(){
    var rate = parseFloat($('#rate').val()) || 0;
    var box = parseFloat($('#box').val()) || 0;

    $('#amount').val(rate * box);    
});

DEMO

You can use keyup event to calculate amount as soon as you enter other fields

$('#rate, #box').keyup(function(){
    var rate = parseFloat($('#rate').val()) || 0;
    var box = parseFloat($('#box').val()) || 0;

    $('#amount').val(rate * box);    
});

DEMO