I am trying to update an input with 2 other inputs. For example

Amount : (user inputs value)

Fee: (value is already set -- disabled value: 0.0002)

Total: (amount - fee) worked out via javascript below

$('#amount').keypress(function() {
var total = $('#amount').val() - $('#fee').val();
if(typeof total != 'undefined'){ $('#total').val(total) }});

When I 'keypress' on my input with a number, it is one step behind updating the input with total.

Say for an example if I type 1 in the input amount, the total will be -0.0002(the fee) when I press 1 again, it will be 0.9998 (even though the amount input is now 11 so on so forth.)

I am trying to update an input with 2 other inputs. For example

Amount : (user inputs value)

Fee: (value is already set -- disabled value: 0.0002)

Total: (amount - fee) worked out via javascript below

$('#amount').keypress(function() {
var total = $('#amount').val() - $('#fee').val();
if(typeof total != 'undefined'){ $('#total').val(total) }});

When I 'keypress' on my input with a number, it is one step behind updating the input with total.

Say for an example if I type 1 in the input amount, the total will be -0.0002(the fee) when I press 1 again, it will be 0.9998 (even though the amount input is now 11 so on so forth.)

• javascript
• jquery

• That worked. I need to look up different .key to see the difference. Thank you. – john smith Commented Feb 9, 2015 at 23:46
• Should I include it as an answer? :P – JJJ Commented Feb 9, 2015 at 23:48
• The input Event is a better option. It's faster. I posted an answer below – Derk Jan Speelman Commented Mar 21, 2019 at 9:20

3 Answers 3

It's cause of you're using keypress which consists of 2 events keydown and keyup, so your function launches on the first one - keydown, so you get your values, as you said "one step behind", cause when the keydown event is fired your input field didn't recieve the pressed key value yet. Use keyup and you will get your result:

$('#amount').keyup(function() {
    var total = $('#amount').val() - $('#fee').val();
    if(typeof total != 'undefined') $('#total').val(total) 
});

Fiddle

The posted answers are good answers, but the best event to use here is the oninput event, because it's faster.

$('#amount').on('input', function() {
    var total = $('#amount').val() - $('#fee').val();

    if(typeof total != 'undefined'){
        $('#total').val(total);
    }
});

Supported by all browsers: browser support. It's actually better supported than onchange and other events like onkeyup. You can pare that on https://caniuse./.

You can even use this event for other input elements as well. Like checkboxes, radio buttons and the select element.

It's fast. So you can bine this with search queries to make your search results return faster.

Please note: since this is not a keyboard event, there won't be a keyCode or any other keyboard related value in the event.

Read more

• Event Reference
• Global Event Handler

True, because when function is called the field is not updated with the value

The event is called in this steps

• Keydown
• Keypress
• updateview
• Keypress
• updateview
• keyup

So if you can change this event to keyup then you will get the latest value.