Good algorithm for creating a dynamic registration form?

Question

JavaScript

In general, the essence is this: There is a project in Yii using Yii-booster.
There is a registration form.
During the registration process, the user starts a store and then adds products to it. This happens as follows:
1. An empty page with a suggestion to add a category.
2. The user adds a category, selects an icon from those offered. A new category (empty) appears in the list with a field for creating subcategories.
3. The user enters a new subcategory, it appears inside the category.
4. Inside the subcategory, the user adds products (a popup appears with a form for entering data about the product)

And so it continues until the user enters data about all the products. Of course, this whole thing happens without refreshing the page, all data goes through AJAX.

Actually, the problem is this: Since the data before clicking “OK” can be edited, deleted, etc., writing data to the database immediately after receiving an AJAX request, for example, it’s somehow pointless to create a new category, it’s better to wait until the user enters all the data . It is still not clear how to draw all these input fields dynamically, because when a new category is added, a subcategory input field appears inside, similarly, when a subcategory is added for each, an input field for the product is displayed inside.

Actually, code examples, of course, are welcome, but in principle, I will be happy with just a good detailed description.

Thank you all in advance

Answer 1

You can mark entries with the Draft status. In this case, even if the connection is interrupted and the user logs in, he will be able to continue working on his documents. But at the same time, because entries are in draft state, they are not visible to others. As soon as the user completes the input, the status will be updated to something else, such as "Enter completed". In the same way, it becomes possible to delete documents (without physical deletion) and then restore them in case of emergency.

Answer 2

Faced with a similar situation. Save the data in localStorage (you still have all the construction on JS) and then, when all the parameters are set, post to the server. So nothing gets lost