Dynamisch formulier, wat is de beste manier?

[alienfruit]

Ik ben bezig met het uitwerken van een grote formulier zodat het digitaal kan worden ingevuld. Omdat de vragen vaak kunnen veranderen sla ik deze vragen in een database, dat gedeelte werkt perfect. Alleen ik zit nu met het probleem dat er verschillende vragen zijn die pas hoeven worden getoond als er eerder bepaalde antwoorden zijn gegeven. Zoals "Was er sprake van contractbreuk?" Als er op deze antwoord Ja wordt gekozen (<select />) dan moet er één of meerdere vragen te voorschijn komen.

Nu zou je dit kunnen doen door na elke gekozen een post te doen, zodat er een nieuwe formulier wordt gegegeneerd. Alleen dit werkt niet echt fijn, het vertraagd alleen maar enorm. Vervolgens kwam ik met het idee om hiervoor JavaScript te gebruiken. Hierdoor kan je verschillende methoden gebruiken bijv. XMLHttpRequest, arrays. Nu vind ik het gebruik van XMLHttpRequest wat overdone hiervoor, zijn toch er extra post backs e.d. Nu kan je het ook in arrays opslaan maar ik vraag me af of dit wel netjes is, zo'n blok javascript op de pagina.

Ik had mijn code (formulier generatie gaat dmv. een XSLT file) al aangepast zodat ik gemakkelijke reen veld kan verbergen/weergeven dmv. de css attribute: display.

HTML:

// mogelijk aanpassen naar een dd/dt manier
<div id="f-overige">
  <label for="overige">Overige</label>
  <input id="overige" name="overige" class="eInput " value="" />
</div>

Mijn huidige plan is om een methode aan de onload-event te hangen van het venster, die de gehele html pagina doorloopt. Op zoek naar bepaalde class-waardes, hoewel "class"-attribuut hier eigenlijk niet bedoeld is lijkt het mij toch de beste methode. Maar goed als er nu een waarde in de class staat zoals "show-overige-by-OTHER". Dan zou dit moeten betekenen laat het veld "overige" zien wanneer het gekozen antwoord bij deze vraag OTHER is. Als het stukje JavaScript deze magie tegenkomt dan vervangt hij het door een onchange-event (via addEvent()?) met de correct code, dan wordt de vraag overige weergegeven.

Ik dacht vervolgens aan deze (psuedo) code:

JavaScript:

function fieldChangeEventHandler( sRelevantField, sFieldValue ) {
    formField = this;
    sRelevantField = document.getElementById ( 'f-' + sRelevantField );
    if ( !sRelevantField ) return false;

    if ( formField.nodeName == "select" ) {
              for ( var i=0; i < formField.options.length; i++ ) {
                    sOptionValue = formField.options[ i ];
                    if ( sOptionValue == sFieldValue ) {
                             sRelevantField.style.display = 'block[s][/s]';
                    } else {
                             // not selected --- keep it hidden
                             sRelevantField.style.display = 'hidden';
                    }
              }
    } else if ( formField.nodeName == "input" {
           // do stuff
    }
}

Nu is mijn vraag alleen of zoiets nou de beste methode is, of dat er nog een betere methodes/oplossingen zijn voor dit probleem.

[Verwijderd]

Wat ik zou doen in een dergelijk geval is met id's werken. Alle select-opties die alleen in bepaalde gevallen moeten worden weergegeven geef je bijvoorbeeld een id als 'hideVraag10', waarmee het dan alleen getoond moet worden als een selectbox met id 'Vraag10' de optie overig geselecteerd heeft.

Vervolgens kun je bij het laden van het formulier met regex matchen op alle elementen met een id van hide*, die verbergen, en dan aan de bijbehorende elementen (die dus hetzelfde id hebben, maar dan zonder hide) met addEventListener op te letten voor veranderende waardes.

[djluc]

Ik vind je idee erg netjes ts. Vergeet niet om het formulier eerst zonder JS compleet werkbaar te maken. Om je voorbeeld te volgen:
"Was er sprake van contractbreuk? Ga naar vraag X indien ja." o.i.d. Die "ga naar" berichten geef je een bepaalde class welke je middels JS kan verbergen. Hierdoor is het formulier altijd bruikbaar.

[alienfruit]

Als eerste bedankt voor de suggestie van het 'ga naar'. Erg handig, had ik zelf nog niet aangedacht. Waar ik aan had gedacht was om gewoon de velden te negeren bij de submit die niet ingevuld hoefden te worden.

Verder ga ik ook de suggestie met de hide/show ids ook proberen, al mijn velden hebben al een id omdat ik gebruik maak van de label-element.

[ Voor 46% gewijzigd door alienfruit op 25-08-2005 19:32 ]

[djluc]

alienfruit schreef op donderdag 25 augustus 2005 @ 19:30:
Als eerste bedankt voor de suggestie van het 'ga naar'. Erg handig, ik had zelf al wel bedacht om gewoon te velden te negeren bij de submit die niet ingevuld hoefde te worden.

Dat moet je inderdaad sowieso niet doen. Je formulier moet sowieso toch al ook op de server gecontroleerd worden.

[alienfruit]

Ja, ik bedoelde ook de controle op de server

[ Voor 20% gewijzigd door alienfruit op 25-08-2005 19:36 ]

[Zyphrax]

Ik zou het gooien op een multidimensionale array. Met 1 javascript functie die het id (dat geef je mee aan de functie) opzoekt in de array en dan weet je precies wat je extra moet tonen/hiden.

code:

 var arrElements = new Array();
 arrElements["question1"] = new Array("sub1", "sub2", "sub3");
 arrElements["question2"] = new Array("sub4", "sub5", "sub6");

Trouwens voor het maken van digitale formulieren kan je ook heel gemakkelijk InfoPath (zit bij Office2003) gebruiken. Die kan je dit allemaal laten doen (dingen tonen/weghalen) dmv conditional formatting. Dat is echt gemaakt om formulieren te verdigitaliseren. Let op dat je dan wel ff Service pack 1 toevoegd, want die voegt meteen een kluit aan functionaliteit toe.

[ Voor 255% gewijzigd door Zyphrax op 25-08-2005 19:54 ]

[PcDealer]

Wat wil je met de formulieren doen? Anders kun je met Adobe Acrobat ook doen wat je wilt. Check maar eens een formulier van de Belastingdienst (10MB laatst ).

[alienfruit]

Mensen vervelen met grote formulieren op het intranet, waarvoor alleen internet browser nodig is. Als ik InfoPath zo snel even bekijk lijkt het niet echt geschikt, omdat het niet te gebruiken voor op Internet.

[ Voor 60% gewijzigd door alienfruit op 25-08-2005 19:59 ]

[Zyphrax]

InfoPath formulieren zijn vrij klein (en webbased). Maar degene die het opent moet dan wel InfoPath hebben

[Rickets]

PcDealer schreef op donderdag 25 augustus 2005 @ 19:48:
Wat wil je met de formulieren doen? Anders kun je met Adobe Acrobat ook doen wat je wilt. Check maar eens een formulier van de Belastingdienst (10MB laatst ).

Wellicht offtopic, maar als je bezoekers een formulier in moeten vullen, moet je ze niet gaan pesten met formulieren in PDF. Dat is namelijk een verschrikking.

[PcDealer]

Rickets schreef op donderdag 25 augustus 2005 @ 23:01:
[...]

Wellicht offtopic, maar als je bezoekers een formulier in moeten vullen, moet je ze niet gaan pesten met formulieren in PDF. Dat is namelijk een verschrikking.

Ik vind de declaratie forms van VGZ anders erg makkelijk, maar die is ook maar 1 pagina en die de Belastingdienst 12p of zo...

[alienfruit]

Ja, die formulieren van de Belastingsdienst. Ik heb hier nog steeds een pak papier van de help liggen, was niet duidelijk dat tig pagina's ging printen

Ik heb nu de volgende javascript-code, aleen ik heb het gevoel dat dit wel wat beter is.

Java:

XForm.prototype.updateFormField = function( dependedField, dependedValue, field ) {
//  var element=$(dependedField); // !!! getElementById() won't work with radio button
    var elementList = document.getElementsByName( dependedField );
    if ( elementList.length > 1 ) {
        // implementation by requirement: >1 elements means a multiple select element (i.e. radio buttons)
        var firstElement = elementList[0];
        if ( firstElement.tagName == "INPUT" ) {
                elementType = firstElement.getAttribute("type");
                if ( elementType == "radio" || elementType == "checkbox" ) {
                        for ( var i=0; i<elementList.length; i++ ) {
                            if ( elementList[i].checked == true ) {
                                element = elementList[i];
                                elementValue = element.value;
                            }
                        }
                }       }
    } else {
                // @required: elementList=1
                // get element through getElementById
        var element = $(dependedField);
        elementValue = element.value;
    }
    
    //
  if ( elementValue == dependedValue ) {
    Element.show( "f-" + field );
    element.focus();
  } else {
    Element.hide( "f-" + field );
  }
} 

[ Voor 106% gewijzigd door alienfruit op 26-08-2005 12:14 ]