Meerdere velden binnen een blok tonen / verbergen

Op basis van radiobuttons

De volgende voorwaarden moeten in acht worden genomen bij het gebruik van onderstaand clientscript.

De vraagID van de radiobuttons (radio group) moet eindigen op _blocks
De te tonen of verbergen velden worden afgescheiden door een scheidingsteken. De scheidingstekens moeten eindigen op _block en beginnen met de waardes gedefinieerd in de radiobutton.
De vraagvelden moeten allen beginnen met de waardes gedefinieerd in de radiobutton.

var showCorrectSenderFieldset = function(currentValue) {
	var hide = [];
	if (currentValue == 'vraagwaarde1'){
		FormApi.showFieldset('vraagwaarde1_block'); hide = ['vraagwaarde2_block'];
	}
	else if (currentValue == 'vraagwaarde2'){
		FormApi.showFieldset('vraagwaarde2_block'); hide = ['vraagwaarde1_block'];
	}
	else { 
		hide = ['waarde1_block', 'waarde2_block'];
	}

	for (var i = 0; i < hide.length; ++i){
		FormApi.hideFieldset(hide[i], true);
	}
};

var Fields = {
	'vraag_blocks': FormApi.$questionByName('vraag_blocks')
};

// Handle events
Fields.vraag_blocks.bind('change', function(evt){
	showCorrectSenderFieldset($(evt.target).val()); 
});

// Bootstrap the form with prefilled values
showCorrectSenderFieldset(Fields.vraag_blocks.filter(':checked').val());

Waarbij:

vraag_blocks gelijk is aan de vraagID van de radiobuttons
vraagwaarde1 en vraagwaarde2 gelijk zijn aan de waarden van de antwoordmogelijkheden
vraagwaarde1_block en vraagwaarde2_block gelijk zijn aan de vraagID's van de scheidingstekens die behoren tot respectievelijk vraagwaarde1 en vraagwaarde2

Voorbeeld: keuze hoedanigheid

var showCorrectSenderFieldset = function(currentValue) {
	var hide = [];
	if (currentValue == 'person'){
		FormApi.showFieldset('person_requester_block'); hide = ['company_requester_block', 'organization_requester_block'];
	}
	else if (currentValue == 'company'){
		FormApi.showFieldset('company_requester_block'); hide = ['person_requester_block', 'organization_requester_block'];
	}
	else if (currentValue === 'organization'){
		FormApi.showFieldset('organization_requester_block'); hide = ['person_requester_block', 'company_requester_block'];
	}
	else {
		hide = ['person_requester_block', 'company_requester_block', 'organization_requester_block'];
	}

	for (var i = 0; i < hide.length; ++i) {
	FormApi.hideFieldset(hide[i], true);
	}
};

var Fields = {
	'identity_type_blocks': FormApi.$questionByName('identity_type_blocks')
};

// Handle events
Fields.identity_type_blocks.bind('change', function(evt) {
	showCorrectSenderFieldset($(evt.target).val()); 
});

// Bootstrap the form with prefilled values
showCorrectSenderFieldset(Fields.identity_type_blocks.filter(':checked').val());

Waarbij:

identity_type_blocks gelijk is aan de vraagID van de radiobuttons waar gevraagd wordt naar de hoedanigheid van de gebruiker
person gelijk is aan de waarde van de antwoordmogelijkheid burger
company gelijk is aan de waarde van de antwoordmogelijkheid bedrijf
organization gelijk is aan de waarde van de antwoordmogelijkheid vereniging
person_requester_block gelijk is aan de vraagID van het scheidingsteken dat bij het onderdeel 'person' hoort
company_requester_block gelijk is aan de vraagID van het scheidingsteken dat bij het onderdeel 'bedrijf' hoort
organization_requester_block gelijk is aan de vraagID van het scheidingsteken dat bij het onderdeel 'vereniging' hoort

Opgelet

Bij het verbergen van een kaart is het belangrijk om de kaart opnieuw te initialiseren in het clientscript. Hiervoor wordt de volgende regel toegevoegd in het script: $('body').trigger('maps:init');

Voorbeeld: keuze locatiebepaling

var showCorrectSenderFieldset = function(currentValue) {
	var hide = [];
	if (currentValue == 'adres') {
		FormApi.showFieldset('adres_block'); hide = ['kaart_block']; 
	}
	else if (currentValue == 'kaart') { 
		FormApi.showFieldset('kaart_block'); 
 		$('body').trigger('maps:init'); 
  		hide = ['adres_block']; 
	}
	else { 
		hide = ['adres_block', 'kaart_block']; 
	}

	for (var i = 0; i < hide.length; ++i) { 
		FormApi.hideFieldset(hide[i], true); 
	}
};

var Fields = { 
	'locatiebepaling_blocks': FormApi.$questionByName('locatiebepaling_blocks') 
};

// Handle events
Fields.locatiebepaling_blocks.bind('change', function(evt) {
	showCorrectSenderFieldset($(evt.target).val());
});

// Bootstrap the form with prefilled values
showCorrectSenderFieldset(Fields.locatiebepaling_blocks.filter(':checked').val());

Waarbij:

locatiebepaling_blocks gelijk is aan de vraagID van de radiobuttons waar gevraagd wordt naar de manier waarop de locatie bepaald zal worden door de gebruiker
adres gelijk is aan de waarde van de antwoordmogelijkheid om zelf het adres op te geven
kaart gelijk is aan de waarde van de antwoordmogelijkheid om de locatie op de kaart aan te duiden
adres_block gelijk is aan de vraagID van het scheidingsteken dat bij het onderdeel adres opgeven hoort
kaart_block gelijk is aan de vraagID van het scheidingsteken dat bij het onderdeel aanduiden op kaart hoort

Op basis van een keuzelijst

De volgende voorwaarden moeten in acht worden genomen bij het gebruik van onderstaand clientscript.

De vraagID van de keuzelijst moet eindigen op _blocks
De te tonen of verbergen velden worden afgescheiden door een scheidingsteken. De scheidingstekens moeten eindigen op _block en beginnen met de waardes gedefinieerd in de keuzelijst.
De vraagvelden moeten allen beginnen met de waardes gedefinieerd in de keuzelijst.

Voorbeeld

var showCorrectSenderFieldset = function(currentValue) {
	var hide = [];
	if (currentValue == 'vraagwaarde1') { 
		FormApi.showFieldset('vraagwaarde1_block'); hide = ['vraagwaarde2_block']; 
	}
	else if (currentValue == 'vraagwaarde2') { 
		FormApi.showFieldset('vraagwaarde2_block'); hide = ['vraagwaarde1_block']; 
	}
	else { 
		hide = ['waarde1_block', 'waarde2_block']; 
	}

	for (var i = 0; i < hide.length; ++i) { 
		FormApi.hideFieldset(hide[i], true); 
	}
};

var Fields = { 
	'vraag_blocks': FormApi.$questionByName('vraag_blocks', 'select') 
};

// Handle events
Fields.vraag_blocks.bind('change', function(evt) { 
	showCorrectSenderFieldset($(evt.target).val()); 
});

// Bootstrap the form with prefilled values
showCorrectSenderFieldset(Fields.vraag_blocks.find(':selected').val());

Waarbij:

vraag_blocks gelijk is aan de vraagID van de keuzelijst
vraagwaarde1 en vraagwaarde2 gelijk zijn aan de waarden van de antwoordmogelijkheden
vraagwaarde1_block en vraagwaarde2_block gelijk zijn aan de vraagID's van de scheidingstekens die behoren tot respectievelijk vraagwaarde1 en vraagwaarde2