Lesson 4 of 8
Submit only once
- 12 min
- 5 checks
- 3 hints
- Go to task
Goal
Stop a double click from placing two orders
Explanation
The user clicks "Buy" and nothing seems to change, so they click again. The result is two orders, two shipments, and then a call to customer support.
The protection comes in two layers. A guard in the code is a variable that stops a second submission from running before the first one finishes. A guard in the UI means you disable the button and change its text so the user can see that something is happening.
Neither one is enough on its own. The variable alone shows the user nothing, and disabling the button alone doesn't protect the code, because the submit event can come from somewhere other than the button.
Your task
Make the order go out only once no matter how many times the button is clicked, and restore the button when the request finishes.
Checks
5 checks- Rapid repeated submits send a single order
- The button is disabled while sending
- The button works again when it's done
- The page doesn't reload on submit
- You can submit again after the first order finishes