How do I build a multi-stage web form?

Question

I'm trying to build a webform that has multiple stages. I'm patterning it off of the Stack Overflow / Stack Exchange flagging webform. The problem is, I'm not sure how to trigger the "next stage" action.

To illustrate, if one wants to flag a question on Stack Overflow, you click flag and then a popup prompts you to make a choice. If you choose the second option ("it doesn't belong here, or it is a duplicate") the form automagically takes you to a second screen.

First screen:

Upon click, it auto-redirects to:

The problem is that I don't know what the underlying trigger is. How does clicking that radio button send the end user to the next screen?

I tried checking the source, but I have a feeling I'm only seeing half the picture:

No amount of HTML tutorials I find have any practice example similar to this. I suspect this is JavaScript, but I can't find the linked .js file that would trigger these actions.

So: How does the webform auto-redirect upon click? As a follow-up, if it's using JavaScript, is there an HTML/CSS-only workaround I can use?

Answer 1

It might help to think about this at a lower level than frameworks. There are two ways one could make a multi-stage form.

The first (and generally older) way is to store the state on the server. Each stage of the form is actually a separate form, and the client's progress through the questionnaire is kept on the server (for example, as part of the session data).

The second way (the more modern one) is to use JavaScript, as you suspected. There is actually very little black magic in this case, and no auto-redirects on clicks at all. All you do is have one very long form where you show/hide some of the elements depending on the user's selections (of course, you could have multiple <form> elements which you show/hide).