Create multi select checkbox list

[Volomeister]

Hello,

I need to create a multi-select checkbox list based on lookup table and save the input into text255 field.

Here is a solution I came up with:

1. Create a Listbox drop-down for your text field where you will store selected values:



2. Add the following JavaScript code snippet to the header/footer of your Form DataPage:
 

<script>
if (typeof main=='undefined') {
const dropDownSelector = '[name="InsertRecordFieldName"]'
const addRequiredSetupForHTMLSelect = (HTMLSelectElement) => {
HTMLSelectElement.setAttribute('multiple', true)
if(HTMLSelectElement.querySelector('option[value=""]')!==null) {
HTMLSelectElement.querySelector('option[value=""]').removeAttribute('selected')
}
HTMLSelectElement.style.display = 'none'
}

const generateHTMLCheckboxTemplate = (display, value) => {
return `<div class="cbFormFieldCell">
         <span data-cb-name="cbFormDataCheckbox" class="cbFormData">
         <input type="checkbox" name="${display}" id="${display}" value="${value}" class="custom-checbox">
         <label for="${display}">${display}</label>
         </span>
        </div>`
}

const addCheckboxesBasedOnHTMLSelectOptions = (HTMLSelectElement) => {

HTMLSelectElement.querySelectorAll('option').forEach(option=>{
let value = option.getAttribute('value')
if(value!='') {
HTMLSelectElement.insertAdjacentHTML('beforebegin', generateHTMLCheckboxTemplate(option.innerText, value))
}
})
}

const syncCheckBoxWithSelect = (HTMLSelectElement, HTMLCheckbox) => {
HTMLCheckbox.addEventListener('change', (e)=>{
    let HTMLOptionEl = HTMLSelectElement.querySelector(`option[value="${e.target.getAttribute('value')}"]`)
    if(e.target.checked) {
        HTMLOptionEl.setAttribute('selected',  'selected')
    }
    else {
        HTMLOptionEl.removeAttribute('selected')
    }  
})
}

const addEventListenersToCheckboxes = (HTMLSelectElement) => {
document.querySelectorAll('.custom-checbox').forEach(checkBox => {
syncCheckBoxWithSelect(HTMLSelectElement, checkBox)
})
}

const main = () => {
const HTMLSelectElement = document.querySelector(dropDownSelector)
addRequiredSetupForHTMLSelect(HTMLSelectElement)
addCheckboxesBasedOnHTMLSelectOptions(HTMLSelectElement)
addEventListenersToCheckboxes(HTMLSelectElement)
document.removeEventListener('DataPageReady', main)
}

document.addEventListener('DataPageReady', main)
}

</script>

3. Substitute "InsertRecordFieldName" with the name of your respective text field that you can find in the source code of your page.

For example, in this case it will be "InsertRecordText_255_1"



So in the code, in this example, instead of

const dropDownSelector = '[name="InsertRecordFieldName"]'

It will be
 

const dropDownSelector = '[name="InsertRecordText_255_1"]'

The end solution will look something like this:


It can be checked here: https://c7eku786.caspio.com/dp/7f80b00033936335ac9d4603b996

Hope this helps somebody

[APTUS]

Hello @Volomeister,

your script, provided above, for converting a listbox to multiselect checkboxes is fantastic and works great... thank you so much for posting it. But (unfortunately sometimes there is a but): while I have used it in a couple of datapages and tested it in the Caspio preview mode of said datapages and it works/looks great, as soon as I added it to a webpage (I've tried both a pure HTML page as well as a WordPress page) it simply does not work. The JS script appears to be running, but the conversion to checkboxes and multiselect is not taking effect.

Do you have any thoughts about why this might be happening? Any guidance or solution will be much appreciated.

Thanks.

[Volomeister]

Hello @APTUS

It appears to be an overlap with function naming in the script and wordpress. "main" function in the script has a counterpart in wordpress. To make it work, just rename the "main" function to something different, for example "mainDataPageReadyHandler"
Just substitute "main" to "mainDataPageReadyHandler" everywhere in the script and it should work when deployed on wordpress and other places

[APTUS]

@Volomeister, WOW... amazing. It works. You have no idea how much I appreciate your quick response and to make it even better, a response with a working solution. You really made my day.

Thank you, thank you, thank you...