[Zope] Smarter Forms (variant example)

28 Aug 2000

      Hi all 

While playing with jules's nice Smarter Forms example, I've made a 
(perhaps obvious) slightly elaborated variant of it. 

....................................................................
<dtml-comment> njj == Jean Jordaan
</dtml-comment> 

<dtml-var standard_html_header>

<dtml-comment> njj: from

    How-To: (Hopefully) Smarter Forms 0.1
    Created by jules. Last modified on 2000/01/30.

</dtml-comment>

<dtml-comment>

    One of my pet peeves is filling out a form, only to find something
    is wrong. Then I hit the back button to lose all my input. Grrr! The
    Web GUI doesn't have to be A Bad Thing and with a little effort on
    the part of the programmer/designer, gently prompting a user to
    correct their mistakes is quite easy.

    This is a simple example of a form that is smart enough to know when
    something is wrong and not lose data. All we're asking for is the
    user's name -- if it's empty, we print out an error message and
    don't continue.

</dtml-comment>

<dtml-comment> njj: 
    Instead of calling the form in a separate method (as recommended by
    the How-To), build it in the handler page. If necessary, one could
    factor out the individual *inputs* into separate methods. This
    allows you to show per-input prompts.
</dtml-comment>
<form method="post">

<dtml-if expr="REQUEST.REQUEST_METHOD=='POST'">
    <dtml-comment>
        If we're here, the user has hit the submit button and we have
        form data to consider.
    </dtml-comment>

    <dtml-call "REQUEST.set('finished','true')">
    <dtml-comment>
        Assume things are OK by setting finished to 'true'
        If they're not, change the value of finished as
        we hit an error.
    </dtml-comment>

    <dtml-unless "firstname">
        <li>Please fill in your first name .. 
        <dtml-call "REQUEST.set('finished','false')">
    </dtml-unless> 
    <dtml-comment> njj: to avoid repeating the input below, make it a
        separate method:
        <dtml-var expr="input_firstname()">
    </dtml-comment>
    First name: 
    <input type="text" name="firstname"
    <dtml-if firstname> value="<dtml-var "firstname">" </dtml-if>
    ><br>

    <dtml-unless "surname">
        <li>Please fill in your surname .. 
        <dtml-call "REQUEST.set('finished','false')">
    </dtml-unless> 
    <dtml-comment> njj:
        <dtml-var expr="input_surname()">
    </dtml-comment>
    Surname:
    <input type="text" name="surname"
    <dtml-if surname> value="<dtml-var "surname">" </dtml-if>
    ><br>

    <dtml-unless "otherstuff">
        <li>Please fill in your other stuff .. 
        <dtml-call "REQUEST.set('finished','false')">
    </dtml-unless> 
    <dtml-comment> njj:
        <dtml-var expr="input_otherstuff()">
    </dtml-comment>
    Other stuff:
    <input type="text" name="otherstuff"
    <dtml-if otherstuff> value="<dtml-var "otherstuff">" </dtml-if>
    ><br>

    <dtml-if "REQUEST.get('finished')=='true'">
        <dtml-comment>
            If finished is true, all is well in user-land. Show a nice
            thank you message and instructions on what to do next.
            Your save data code should go here and before the thank you
            message is sent.
        </dtml-comment>
        <dtml-comment> njj: "save data code":
            <dtml-call "edit_properties">
        </dtml-comment>
        <p> You're done! Thanks for your input <dtml-var firstname>.
        </p>
        <p> You could put a link to somewhere else on your site here...
        </p>
    <dtml-else>
        <p> Some of the fields above still need to be filled in. Please
        complete them to continue. </p>
    </dtml-if>

<dtml-else>
    <dtml-comment>
        If we're here, it's the first time through. Print out the form
        as-is.
        If you use a form's POST rather than an href link to get here,
        your user will get an error message which will confuse the
        whatsits out of them.
    </dtml-comment>
    <p>Hello, dear user. Please fill out the form below. Note that the
    <b>bold</b> items are required before you can continue.</p>

    <dtml-comment> njj: or do it this way:
        <dtml-var expr="input_firstname()">
        <dtml-var expr="input_surname()">
        <dtml-var expr="input_otherstuff()">
    </dtml-comment>

    First name: 
    <input type="text" name="firstname"
    <dtml-if firstname> value="<dtml-var "firstname">" </dtml-if>
    ><br>
    Surname:
    <input type="text" name="surname"
    <dtml-if surname> value="<dtml-var "surname">" </dtml-if>
    ><br>
    Other stuff:
    <input type="text" name="otherstuff"
    <dtml-if otherstuff> value="<dtml-var "otherstuff">" </dtml-if>
    >

</dtml-if>

<input type="submit" value="Next>>">
</form>

<dtml-var standard_html_footer>
....................................................................

-- 
Jean Jordaan       --    technical writer    --
Mosaic Software    --    Zope 2.1.6 on WinNT and W2K