If I understand correctly, you are trying to do the following, in different steps:
- Step 1 Look up and open an order.
- Step 2a Scan a product
- Step 2b Haveit looked up and shown
- Step 2c Show if the action has worked out and show feedback
- Step 2d See if there are more products
- If yes, go back to Step 2a
- If no, go to Step 3
- Step 3 Submit data and have it processed in the backend
And what you are asking is a good way to handle the whole of step 2
I can come up with 2 ways:
Server sided
Make some extra tables to hold a 'session'.
Your session here is those 3 steps in all.
ScanSessionHeader
ScanSessionLine
for example
When you scan the order, you make a header record with a change DateTime and make it hold an open state.
As long as the record is in this 'open' state. You show this on your webpage and you can keep showing the next scan field.
When you submit a product line to the backend you, save the product barcode in the ScanSessionLine and it's validation state.
And you can show this information on the webpage.
When the whole thing needs to be submitted, you 'close' the header so it can not longer be used to add more lines too.
And if all lines are validated properly you process them all in one go.
You can do the same by storing everything in SESSION variables, but the whole scan session will get lost when the server gets restarted.
This can be prevented by showing any open scan sessions when none are actively bound to this session. (by holding a ScanSessionHeader.ID in the session) so you can continue after a server restart (or Apache restart).
Client side with asynchronous server calls
After the order gets retrieved, you open a form with the field for the product barcode.
You can do this from the server side, but I would start this with JavaScript from the start.
As soon as something is entered in the field, you do an AJAX call:
https://www.w3schools.com/xml/ajax_intro.asp
This loads a webpages in the background, with parameters and after you use this call to validate the barcode, you can set the state of the product line.
With every product scanned you can show a new product line, so you can add more.
And as long as all lines get validated as correct, you keep showing the submit button for the whole form.
However, all data gets lost as soon as the pages gets reloaded.
For example Javascript error prevents you from completing the form further so the user reloads.
What path you choose depend on your use case:
If you want a safe solution with ways to save the state of the scanning, go with the first one and save in the database. Just make sure to implement a way to throw away old/stall scan sessions.
If you need more speed and don't want to wait for full page reloads and want it all to look more fancy and snappy. Go with asynchronous server calls and do all your magic with JavaScript.
You can still save the whole session in a database, but it will take a bit more code to be able to restore a session to the webpage the user is viewing.
Or if you want a really quick and dirty solution. Pass all data needed for the validations into the webpage and let Javascript handle everything.
Write down some requirements and I could advise what path could work for you.