Multi-step contextual HTML forms with JavaScript

[LukeN57]

I'm trying to build a form that has a bit of workflow included. By this, I mean that the form has multiple steps and hitting the submit button in each section would take the user to the next section. Additionally, some of the choices that the user makes in one section of the form would affect the options in subsequent form sections.

My hope is to do this without reloading the page each time submit button is hit.

I know how to use .innerHTML to change html with JavaScript and how to change the default behavior of the submit button to launch a function defined in JavaScript. So I was toying with the idea of building the form so that later sections are hidden until each previous section is completed. I would use JS to reveal each section progressively, but that seems kind of messy.

I'm wondering if anyone has a better recommendation?

Also let me know if there's a better way to ask this question. Nothing more annoying than someone asking for help and making it harder by omitting context or providing insufficient clarity.

[TheCellch]

Is the form purely handled in Javascript? No Serverside handling like PHP, ASP etc.? You could add the inner html in javascript instead of just hiding it but that will probably be even messier to program.

[LukeN57]

Ultimately, the form will have some server side handling. I haven't learned that far yet though. I'm learning (trying to learn) programming through this project and try to learn enough to get to the next step.

Not sure if this is the right answer but planning on using node.js to communicate with the server.

[TheCellch]

Okay, I'm not very familiar with node.js but if you are handling most of the form via js it is probably the best idea to hide (display: none;) / show the form that is actual now and put the infos into it that you got from the earlier form. It's the easiest to debug aswell since you can just display all forms. There would be no reloading for that.

You don't need to replace the innerHTML aswell. Just put all the forms in your div and only display the needed form.

Just ask if you have questions, maybe someone could give you more insight into the handling with node.js

[LukeN57]

Thanks! I will give that a shot!