Ajax in ajax in ajax, which solution to choose?

Question

JavaScript

In general, the essence of the question is this, there are 4 steps of the form, all subsequent steps are loaded by Ajax, after the previous step has been successfully completed.

A banal solution is to hang a function on the form submission that will load the next step, the submit on which the next step will load, and so on. The code will turn into a footcloth of function calls, and in general I think that this is a bad practice.

Maybe someone met with a similar, how did you decide? what technologies were used?

Thank you.

Answer 1

There will be no footcloth. There will be one function and one callback, only the current_step and token parameters will differ, or whatever you call them, by which the backend will determine which part of the form to give.
And this is good practice. It is also easy to maintain.
PS To load the form immediately or not depends on its size and complexity. If the form is large and complex, and the state of the intermediate stages depends on the previous ones, it is necessary to break it up.

Answer 2

This is a completely normal algorithm.
You can upload the entire form at once. And show only one step and change them, make the client validate (if possible) - then you will have to make only one request - at the final form submission.
But if validation must be done after each step and it is not possible without a server, then a lot of requests cannot be avoided, and. IMHO, this is quite normal.
Look for plugins for jQuery or your framework - there are probably a dozen of them.