In my webform, users can select a project type from a dropdown field and different sections will hide or display based on their selection. The array below contains the id's of the fieldsets and the corresponding values selected in the dropdown.
However, I have encountered an issue with a client request. They want two specific sections/fieldsets to appear when a particular project is selected, regardless of the project type. For instance, if the user selects 'Brochure' as the project type, the client wants both the 'Brochure' section/fieldset and another fieldset named "Brief Details" (id: 556) to be displayed.
The problem is that adding "{id : '556', value:'Brochure'}" to the array causes the "Brief Details" section/fieldset to display, but it hides the "Brochure" fieldset that should also be visible. I understand why this is happening but are struggling to make the necessary adjustments in the JavaScript code.
So how can I modify the existing code to ensure that when the project type selected is 'Brochure', both fieldset 556 and 159 are shown?
var projectTypes = new Array (
{id : '123', value:'Banner'},
{id : '456', value:'Ad'},
{id : '789', value:'Graphics'},
{id : '987', value:'Billboard'},
{id : '654', value:'Booklet'},
{id : '321', value:'Tickets'},
{id : '147', value:'Window'},
{id : '159', value:'Brochure'}
);
/*function below occurs onChange event of project type dropdown:*/
refreshSections(project_type);
/*
* Function used to hide/show sections based on selected project type
*/
function refreshSections(selectedType)
{
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
} else {
document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}
}
}