javascript - How do I build a multi-stage web form? - Stack Overflow

admin管理员组

文章数量:1324829

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?

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?

• javascript
• jquery
• html
• forms
• animation

Share Improve this question Follow edited May 11, 2012 at 2:39 casperOne 74.6k1919 gold badges189189 silver badges260260 bronze badges asked May 11, 2012 at 2:33 AarthiAarthi 30544 silver badges2222 bronze badges 4

• Like I said, I suspect this is JavaScript black magic, in which case: I'll need more jQuery. Which I don't know. – Aarthi Commented May 11, 2012 at 2:36
• 2 you can use jquery or multiple ajax modal popup, add autopostback to radio buttons, when on checked or button click hide and show appropriate modal form. – rs. Commented May 11, 2012 at 2:38
• 3 As a SE employee, couldn't you go to the source and ask the programmers? Or are they an ornery, cantankerous bunch? – j08691 Commented May 11, 2012 at 2:54
• 4 @j08691 They're busy making the site 1000% more awesome. I didn't want to bother them with this. – Aarthi Commented May 11, 2012 at 2:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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).

Well, I'd use some sort of jQuery wizard plugin and adapt it to my needs. I did it very recently and it wasn't that hard. You should try SmartWizard 3.0, it's pretty active, the last release was about 2 months ago and the coders answered my questions pretty fast.

Here it is: https://github./mstratman/jQuery-Smart-Wizard

You can trigger the wizard to advance to the next step linking an event to the action of clicking the radio button.

Good luck :)

本文标签： javascriptHow do I build a multistage web formStack Overflow