Velden verbergen in verzoeken

Situatie

In de categorie “handig om te weten”, kwam ik deze week een leuke functionaliteit tegen. Ik was samen met een partner consultant aan de slag bij een klant. Deze consultant had een handige functionaliteit toegevoegd aan een verzoektype. Met deze functie is het mogelijk om op basis van een waarde in een veld, andere velden in het verzoek te tonen of te verbergen.

In onderstaand voorbeeld verzoektype heb ik een dropdown veld aangemaakt met de waarden:

• keuze 2
• keuze 3
• keuze 4

Op basis van de keuze die de gebruiker maakt, wil ik graag dat in het geval van keuze 2, vrij tekst veld 2 zichtbaar wordt gemaakt.

Nadat de gebruik zijn/haar keuze heeft gemaakt, wordt het veld zichtbaar:

Veranderd de gebruiker de keuze in de dropdown box, dan word dit direct gewijzigd in het verzoek:

Werking

Door de volgende 3 secties aan te maken, worden de wijzingen in vrij tekst veld 1 opgepakt:

Sectie 1:

<script type=”text/javascript”> $(function() { $( “#FreeTextField_01” ).attr(“onchange”, “”); $( “#FreeTextField_01” ).change(function() { SysResetInvalidFlag(‘FreeTextField_01’); if( $( “#FreeTextField_01” ).val() == ‘keuze 2’ ){ $( “#FreeTextField_02” ).parent().parent().show(); } else { $( “#FreeTextField_02” ).parent().parent().hide(); } }); $( “#FreeTextField_01” ).trigger(‘change’); }); </script>

Sectie 2:

<script type=”text/javascript”> $(function() { $( “#FreeTextField_01” ).attr(“onchange”, “”); $( “#FreeTextField_01” ).change(function() { SysResetInvalidFlag(‘FreeTextField_01’); if( $( “#FreeTextField_01” ).val() == ‘keuze 3’ ){ $( “#FreeTextField_03” ).parent().parent().show(); } else { $( “#FreeTextField_03” ).parent().parent().hide(); } }); $( “#FreeTextField_01” ).trigger(‘change’); }); </script>

Sectie 3;

<script type=”text/javascript”> $(function() { $( “#FreeTextField_01” ).attr(“onchange”, “”); $( “#FreeTextField_01” ).change(function() { SysResetInvalidFlag(‘FreeTextField_01’); if( $( “#FreeTextField_01” ).val() == ‘keuze 4’ ){ $( “#FreeTextField_04” ).parent().parent().show(); } else { $( “#FreeTextField_04” ).parent().parent().hide(); } }); $( “#FreeTextField_01” ).trigger(‘change’); }); </script>

Totaal overzicht inrichting:

Op deze manier kunnen verzoeken overzichtelijker worden gepresenteerd aan de gebruiker. Tevens wordt op deze manier de gebruiker geleid naar de juiste invul velden. Handig? Super handig!

Alban Selmani; Alle credits voor jou!