Skip to content

multistep forms

Jump to bottom
pkirlin edited this page Oct 11, 2016 · 7 revisions

Multistep forms - in two different ways!

In the previous section, you saw how to use hidden variables to save application state (basically, variables) across multiple webpage requests and responses. Now, we will use our new knowledge to re-write our random number generator using a multistep form. In other words, we will have one page that asks for the lower limit, then a separate page that asks for the upper limit, then a third page that generates the random number. In the real world, there's no particular reason to break it up this way, but you will see a new technique to manage what "step" of the form you are on.

When creating multistep forms, one way to break up the steps is to have a different route and/or HTML template for each step. Try making three HTML templates:

random1.html

<html>
  <head>
    <title>Random</title>
  </head>
<body>
  <h1>Random numbers are fun!</h1>  
  <form action="{{ url_for('random2') }}" method="post">
  Pick a lower limit: <input type="text" name="lowerlim"><br>
  <input type="submit" value="Next">
  </form>
</body>
</html>

random2.html

<html>
  <head>
    <title>Random</title>
  </head>
<body>
  <h1>Random numbers are fun!</h1>  
  <form action="{{ url_for('random3') }}" method="post">
  Thanks, you picked {{low}}.<br>
  Pick an upper limit: <input type="text" name="upperlim"><br>
  <input type="hidden" name="lowerlim" value="{{low}}">
  <input type="submit" value="Generate">
  </form>
</body>
</html>

random3.html

<html>
  <head>
    <title>Random</title>
  </head>
<body>
  <h1>Random numbers are fun!</h1>  
  Your random number is: {{number}}.<br>
</body>
</html>

Use the main wiki page to navigate, not the list of pages directly above, because those are out of order.

Clone this wiki locally