Formulier in verschillende stappen

[gvanh]

Bij deze wil ik graag eens een discussie opstarten over de beste manier om een implementatie te schrijven voor een formulier dat in verschillende stappen gegevens van een gebruiker verzamelt. Als forum heb ik voor Programming gekozen, aangezien het niet specifiek gaat om clientside of serverside, maar om een combinatie van beide kanten. Ik denk ook dat de discussie zich niet per se zou moeten beperken tot één bepaalde serverside programmeertaal, aangezien het meer een conceptuele vraag is, dan een specifieke implementatie.

Als minimale vereisten voor een gebruikersvriendelijke en toegankelijke afhandeling, kan ik het volgende verzinnen:

1. De formulier-verwerking moet aan de clientside werken met alle browsers en mag niet afhankelijk zijn van JavaScript; eventuele (unobtrusive) usability-enhancements (JS/AJAX/etc.) zijn optioneel.
2. Bij iedere stap in het formulier moet aan de kant van de server validation plaats vinden
3. Wanneer een veld niet of niet correct ingevuld is, moet de gebruiker daarover specifieke feedback krijgen.
4. Wanneer een stap niet correct ingevuld is, moet hetzelfde formulier (dezelfde stap) nogmaals getoond worden, waarbij alle reeds ingevulde gegevens opnieuw getoond moeten worden.
5. De gebruiker moet in de procedure stappen vooruit en stappen terug kunnen zetten; alleen bij een stap vooruit moet validatie plaatsvinden.
6. Ook bij stappen terug moet eventueel ingevulde informatie behouden blijven.
7. Afhankelijk van ingevulde informatie moet eventueel een stap in het proces overgeslagen kunnen worden. Die stap moet dan zowel bij vooruit stappen als bij achteruit stappen overgeslagen worden.
8. De basale browser-usability (enter=standaard form-submit, etc.) mag niet worden aangetast.

Het eerste punt ... en misschien wel het belangrijkste voor een goede werking, is hoe je op een goede manier de huidige stap bijhoudt en de "navigatie" van stappen vooruit en terug regelt.

Tot nu toe heb ik dat steeds opgelost door middel van JavaScript. In het formulier wordt de huidige stap opgeslagen en een "increment" value, die aangeeft of het formulier een stap héén of een stap terug moet zetten. Zowel de "vorige" als "volgende" knop zijn submit-buttons. Wanneer de "volgende" knop wordt ingedrukt, wordt het formulier zonder verdere JavaScript-interventie verzonden. In het formulier worden dan voor de stappenregistratie de volgende twee variabelen meegegeven:

HTML:

<input type='hidden' name='step' value={huidige stap} /> 
<input type='hidden' name='incr' value=1 />

De serverside weet dan de huidige stap en of er vooruit of terug gestapt wordt. Wanneer de terug-knop wordt ingedrukt, wordt middels JavaScript eerst de "incr" waarde op '-1' gezet, vervolgens wordt het formulier gesubmit. De server weet dan dat er een stap teruggezet moet worden.

Zoals in mijn wensen/eisen-lijstje neergezet, lijkt het me beter om de basale functionaliteit niet te baseren op JavaScript-functionaliteit.

Ik ben benieuwd naar de oplossingen die jullie hiervoor gevonden hebben. Ik vermoed dat vrijwel iedere webbouwer hiermee te maken heeft gekregen.

[eghie]

Ik zou de stappen in de URL opslaan (GET variable). Dit omdat je dan gewoon de back button kunt gebruiken van je browser. Misschien met een vorm van javascript history bestand om de javascript layer eroverheen te gooien.

Ik zou de gedachte in je achterhoofd houden, dat JavaScript gebruikers extra ondersteuning krijgen, maar dat hij zonder ook wel werkt. Ga niet proberen om mensen zonder JavaScript precies dezelfde ondersteuning te bieden. Bouw je site voor mensen zonder JavaScript, zodat je site gewoon werkt. Ga vervolgens erbovenop Javascript erop zetten die de website als het ware overerft.

Kijk ook eens naar de volgende links:
http://domscripting.com/blog/display/41
http://www.stevetucker.co..._degrading_javascript.php
http://webtips.dan.info/graceful.html

[gvanh]

eghie schreef op zondag 01 februari 2009 @ 14:31:
Ik zou de stappen in de URL opslaan (GET variable). Dit omdat je dan gewoon de back button kunt gebruiken van je browser. Misschien met een vorm van javascript history bestand om de javascript layer eroverheen te gooien.

Ik zou de gedachte in je achterhoofd houden, dat JavaScript gebruikers extra ondersteuning krijgen, maar dat hij zonder ook wel werkt. Ga niet proberen om mensen zonder JavaScript precies dezelfde ondersteuning te bieden. Bouw je site voor mensen zonder JavaScript, zodat je site gewoon werkt. Ga vervolgens erbovenop Javascript erop zetten die de website als het ware overerft.

Kijk ook eens naar de volgende links:
http://domscripting.com/blog/display/41
http://www.stevetucker.co..._degrading_javascript.php
http://webtips.dan.info/graceful.html

Helemaal eens dat JavaScript alleen achteraf toegevoegd mag worden (unobtrusive) ... dat is ook één van de vereisten die ik mijn lijstje heb opgenomen. Ik snap alleen niet helemaal hoe jij het variabelen-in-de-URL idee voor ogen hebt. Hoe zie je dat? De URL met vars gebruiken als "action" voor het formulier of zo?

[eghie]

gvanh schreef op zondag 01 februari 2009 @ 14:47:
[...]


Helemaal eens dat JavaScript alleen achteraf toegevoegd mag worden (unobtrusive) ... dat is ook één van de vereisten die ik mijn lijstje heb opgenomen. Ik snap alleen niet helemaal hoe jij het variabelen-in-de-URL idee voor ogen hebt. Hoe zie je dat? De URL met vars gebruiken als "action" voor het formulier of zo?

Voorbeeld:

HTML:

<form id="frmstep" method="post" action="/stepform.php?step=1">
   <input type="submit" name="submit" value="Vorige" />
   <input type="submit" name="submit" value="Volgende" />
</form>
<script type="text/javascript">
document.getElementById('frmstep').onsubmit = function() {
    // doe validatie
    // doe andere rare dingen

    // doe ajax submit
    // ga naar volgende pagina met javascript (dmv ajax inladen bijvoorbeeld)

    // doe form submitten op JavaScript manier
    return false;
}
</script>

En dan met javascript het overriden van die links met bijvoorbeeld: http://stilbuero.de/jquery/history/ Zodat je back en forward button gewoon kunt gebruiken via javascript.