In a previous post I was helped a lot with some issues I have encountered while using Finsweet CMS Select & Filter. I am very grateful about the help I have received. But after installing the new code I was provided with, I couldn’t use the submit button of my form anymore. I have tried searching for hidden elements within the form with “required” still checked and checking if the “listInstances” are still on the right place (as far as I can tell).
Hello @Vible! I believe the issue might originate from the CMS Filter setup. If you were trying to filter the Select collections you can remove the script and the element attributes as the code I provided on the other thread will manage the filtering.
Another thing that may be worth looking at is the errors on the console after a user tries to submit the form
Thank you for your reply! The form seems to be working. Unfortunately, I have encountered a minor issue.
I am using the Query Param attribute for the form. My issue is as follows: for example, when a user visits the page with pre-selected options and tries to change the starting date or the course, the options in the select fields are no longer available. It seems as if the Query Param attribute prevents the select and filter attributes from being triggered.
Do you happen to know what might be causing this issue?
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsselect',
(listInstances) => {
console.log('cmsselect successfully loaded!');
const eventSelect = document.querySelector('[fs-cmsselect-element="select"]');
const opleidingSelect = document.querySelector('[fs-cmsselect-element="select-2"]');
const startdatumSelect = document.querySelector('[fs-cmsselect-element="select-3"]');
const listInstance = listInstances[1];
const startdatumListInstance = listInstances[2];
const { items } = listInstance;
const { items: startdatumItems } = startdatumListInstance;
// Function to get query parameters from the URL
function getQueryParams() {
return Object.fromEntries(new URLSearchParams(window.location.search).entries());
}
// Function to populate form fields dynamically based on query parameters
function populateFormFields() {
const queryParams = getQueryParams();
// Loop through each query parameter
for (const [param, value] of Object.entries(queryParams)) {
// Try to find a form field by 'name', 'id', or custom attribute
const formField = document.querySelector(`[name="${param}"]`);
if (formField) {
if (formField.tagName === 'SELECT') {
// For select elements, match the value with one of the options
const optionToSelect = Array.from(formField.options).find(
(option) => option.value === value || option.textContent.trim() === value
);
if (optionToSelect) {
optionToSelect.selected = true;
}
} else {
// For other input types
formField.value = value;
}
}
}
}
// Function to create a placeholder element for the select
const createPlaceholder = (text) => {
const placeholder = document.createElement('option');
placeholder.value = '';
placeholder.textContent = text;
placeholder.selected = true;
return placeholder;
};
// Populate fields when the page loads
populateFormFields();
// Event handling for the event select
eventSelect.addEventListener('change', ({ target }) => {
const selectValue = target.value;
const filteredItems = items.filter(({ element }) => {
if (!selectValue) return true;
const textValue = element.querySelector('[fs-cmsselect-element]');
return textValue?.getAttribute('data-category') === selectValue;
});
opleidingSelect.innerHTML = '';
startdatumSelect.innerHTML = '';
opleidingSelect.appendChild(createPlaceholder('Kies een optie...'));
startdatumSelect.appendChild(createPlaceholder('Kies een optie...'));
filteredItems.forEach(({ element }) => {
const textValue = element.querySelector('[fs-cmsselect-element]');
if (textValue) {
const optionElement = document.createElement('option');
optionElement.value = optionElement.textContent = textValue.textContent.trim();
opleidingSelect.appendChild(optionElement);
}
});
});
// Event handling for the opleiding select
opleidingSelect.addEventListener('change', ({ target }) => {
const selectValue = target.value;
const filteredItems = startdatumItems.filter(({ element }) => {
if (!selectValue) return true;
const textValue = element.querySelector('[fs-cmsselect-element]');
return textValue?.getAttribute('data-category') === selectValue;
});
startdatumSelect.innerHTML = '';
startdatumSelect.appendChild(createPlaceholder('Kies een optie...'));
filteredItems.forEach(({ element }) => {
const textValue = element.querySelector('[fs-cmsselect-element]');
if (textValue) {
const optionElement = document.createElement('option');
optionElement.value = optionElement.textContent = textValue.textContent.trim();
startdatumSelect.appendChild(optionElement);
}
});
});
},
]);
</script>
Note that the way of creating the query params has changed; we need to set the parameter name exactly as we have the name for the field, as this is case-sensitive.
