3.10 More on the <al-select> Tag
Description: More on the <al-select> Tag
Keywords: albatross

#
3.10 More on the `<al-select>` Tag

In the previous section we performed a direct translation of the standard HTML input tags to the equivalent Albatross tags. In addition to a direct translation from the HTML form, the `<al-select>` tag supports a dynamic form.

In all but the most simple web application you will occasionally need to define the options in a `<select>` tag from internal application values. In some ways the dynamic form of the `<al-select>` tag is easier to use than the static form.

The sample program from this section is supplied in the `samples/templates/form3` directory and can be installed in your web server `cgi-bin` directory by running the following commands.

    cd samples/templates/form3
    python install.py

The form from section 3.9 has been modified to include two `<al-select>` tags, and as shown below.

    <html>
     <head>
      <title>Display Form Input</title>
     </head>
     <body>
      Input some values to the following form and press the submit button.
      <form method="post" action="form.py">
       Text field: <al-input name="text"><br>
       Singleton checkbox: <al-input type="checkbox" name="singleton"><br>
       Checkbox group:
       <al-input type="checkbox" name="group" value="check1">
       <al-input type="checkbox" name="group" value="check2"><br>
       Radio buttons:
       <al-input type="radio" name="radio" value="radio1">
       <al-input type="radio" name="radio" value="radio2"><br>
       Option menu:
       <al-select name="select1" optionexpr="option_list1"/>
       <al-select name="select2" optionexpr="option_list2"/>
       <al-input type="submit" name="submit" value="Submit">
      </form>
      <al-include name="form-display.html">
     </body>
    </html>

The `<al-select>` tags demonstrate the two ways that you can define option lists in your code using the `optionexpr` attribute. When converting the tag to HTML the expression in the `optionexpr` attribute is evaluated and the result is used to generate the option list that appears in the generated HTML.

The `<form.py>` program has been modified to supply lists of option values.

    #!/usr/bin/python
    import cgi
    from albatross import SimpleContext

    form = cgi.FieldStorage()
    ctx = SimpleContext('.')

    ctx.locals.option_list1 = ['option1', 'option2', 'option3']
    ctx.locals.option_list2 = [(1, 'option1'), (2, 'option2'), (3, 'option3')]

    ctx.locals.form = form
    for name in form.keys():
        if type(form[name]) is type([]):
            value = []
            for elem in form[name]:
                value.append(elem.value)
        else:
            value = form[name].value
        setattr(ctx.locals, name, value)
    templ = ctx.load_template('form.html')
    templ.to_html(ctx)

    print 'Content-Type: text/html'
    print
    ctx.flush_content()

You can see the program output by pointing your browser at http://www.object-craft.com.au/cgi-bin/alsamp/form3/form.py.

If you view the browser source produced by the two `<al-select>` tags you will see the difference between the way that both option list forms are handled. Note in particular that the tuples in `option_list2` contain an integer value as the first element. This is converted to string when it is compared with the value stored in `select2` to determine which option is selected.

The browser request sent to the application will always contain strings for field values.