forms - How to set a quantity by entering an exact number, or a difference (add/substract amount)?

I have to design a form with one field being a quantity that represents the number of available items of a given product. I want to allow the user to modify this quantity in 2 different ways, in the same form: they can set directly a new quantity, or they can specify an amount to add/substract to the original quantity.

I thought two input fields could define the operation in the following way: one is for the amount to add/substract, and the other is for the result. If the user modifies one the other gets updated. In the end the value submitted is the value of the "result" input field. Negative numbers are allowed. One quick implementation of this for illustration:

https://jsfiddle.net/ra7uxr3x/

Am I on the right track or is there a common pattern to do this in another way? Maybe it shouldn't be possible to use the 2 modes of operation at the same time, so the user should be able to select from an "exact mode" or a "delta mode"?

Answer

When a user opens the inventory form, it could look something like this:

When a field is updated:

• The modified field should indicate that it's been modified from the original value.


• The Save button should be enabled.


• Other fields should be disabled (to prevent users from entering into a confusing state).

The top part of the image shows what would happen if they changed the quantity. The bottom part shows what would happen if they modified the "Added" field.

Separating the fields into Added and Removed makes it clear what the user is doing without having to use confusing +/- notation and aligns with what happened in real life. The terminology should reflect the terminology of the end-users (could be Received/Sold, depending on the situation).

Also, you must allow the users to discard the changes (not shown here).