I have a form with text input box for a user to enter a 'quantity' in. This can be anything from 1 to 99.
When a user enters a 'quantity' it should be multiplied by a set 'price' (£2) and the total should be displayed in a 'total' box.
A user enters a quantity of 5, this is multiplied by the set price and £10 is displayed in the total box.
Current state of play:
I can get this to partly work with an onchange trigger on the quantity box that fires a function to calcutate the new total and display it on the form. The total changes correctly whenever focus leaves the quantity box.
If a user enters a quantity then clicks on the submit button before focus has left the quantity box, the total does change but the user doesn't get a chance to see the updated price (to confirm it is ok) before the form is submitted.
What I tried:
I thought about disabling the submit button if focus is in the quantity box but this reduces usability quite a bit.
I considered forcing the focus to leave the quantity box once a user has entered 2 digits, but this doesn't help if the quantity is a single digit.
Is there a way, without using AJAX if possible, to update the total as the user types into the quantity box? Or any other possible solutions?
Any help in this would be greatly appreciated.