Skip to content

hidden values

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

Maintaining state with hidden fields in forms

It is common to need to break a form up into multiple pieces from time-to-time. This is often done when the second page of the form depends on information submitted on the first page. For example, consider the schedule of classes that BannerWeb displays. The first form asks you to pick a semester, then you hit submit, then the next page asks for the department to list classes for, then you hit submit again, then you get a list of classes for that semester and department combination.

Here is the exchange of information between browser (the client) and the server:

Client                                                       Server
===================================================================

Client requests schedule of classes ----------------------->

        <-----------  Server sends back list of possible semesters,
                                         including blank HTML form.

Client fills out form (drop down of 
semester) and sends to server   ---------------------------->

         <----------  Server reads semester variable from form, 
                      sends list of departments for that semester.

Client picks from list of departments,
but when they submit the form, how do
they send the semester again?  The server
has forgotten it!  ----------------------------------------->

                      Server needs to know both semester and 
                      department here.

One solution to this problem is to have the server, in its first response to the client, send not only the list of departments back to the client, but also the semester that the client chose. Remember, both the client and server are very forgetful, so the client has already forgotten what semester was picked in the previous step. The server can remind them explicitly, however. This is done by having the server, when it generates the HTML form for the list of departments, also include a hidden field in the HTML form that includes the name of the semester. Hidden fields are invisible to the user of the website but they are submitted just like regular fields.

Sample use, part 1.

Try this code, which uses hidden fields to allow the user to resubmit the random number generator as many times in a row as they want, using the same values. Note that you don't need any changes to your Python code, only the HTML code.

<html>
  <head>
    <title>Random</title>
  </head>
<body>
  <h1>Random numbers are fun!</h1>
  <form action="{{ url_for('pick_number') }}" method="post">

  {% if number is not defined %}
    Pick a lower limit: <input type="text" name="lowerlim"><br>
    Pick an upper limit: <input type="text" name="upperlim"><br>
    <input type="submit" value="Generate Number">
  {% else %}
    Your random number is: {{number}}.<br>
    As a reminder, your desired range was [{{low}}, {{high}}].<br>
    <input type="submit" value="Generate another number with same range.">
    <input type="hidden" name="lowerlim" value="{{low}}">
    <input type="hidden" name="upperlim" value="{{high}}">
  {% endif %}

  </form>
</body>
</html>
from flask import Flask, render_template, request
import random
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'
    
@app.route("/random", methods=['get', 'post'])
def pick_number():
  if "upperlim" not in request.form:
    return render_template("random.html")
  else:
    upper = int(request.form['upperlim'])
    lower = int(request.form['lowerlim'])
    n = random.randint(lower, upper + 1)
    return render_template("random.html", number=n, low=lower, high=upper)

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

Clone this wiki locally