checkbox via let to insert

Ask the community
,
1

Hi i have three checkboxes with corresponding fields in my collection.
If i check one of the boxes what code can i use to add the checked box into the collection please?

currently my user input is uploaded like this form normal fields
let toInsert = {
“firstName” : $w( ‘#input1’ ).value,
“middleName” : $w( ‘#input9’ ).value,

so for checkbox1 which doesn’t work and I only want 1 out of 3 checkboxes to be selected and inserted into collection
“checkbox1” : $w( ’ #checkbox1 ’ ).value,

so using the api https://www.wix.com/corvid/reference/$w.Checkbox.html#checked

let isChecked = $w( “#checkbox1” ).checked; true
shows an error thats reads checked does not exist on “#checkbox1”

2

Hi Adam, if you only need one value to be inserted at a time, use the radio buttons instead of the check-boxes, if you have to have those check-boxes, create an onClick() event function to uncheck the other boxes and set the value of the selected one as the default value to be inserted.

For example:
This function will uncheck all the boxes except the one that you pass its ID to the function, and then set the default value for us to use later

let defaultValue; // Global variable

function setDefaultValue(currentBoxId) {
    if (currentBoxId !== undefined) {
        
        switch (currentBoxId) {
        case 'box1':
            $w('#box2, #box3').checked = false;
            defaultValue = $w(`#${currentBoxId}`).value;
        break;
        
        case 'box2':
            $w('#box1, #box3').checked = false;
            defaultValue = $w(`#${currentBoxId}`).value;
        break;
        
        case 'box3':
            $w('#box1, #box2').checked = false;
            defaultValue = $w(`#${currentBoxId}`).value;
        break;        
        }
        
    } else {
        // Set the default value to nulll
    }
}

Now you need to call this function inside each box’s onClick() function that I mentioned earlier:

$w('#box1').onClick( (event) => {
    setDefaultValue('box1');
})

$w('#box2').onClick( (event) => {
    setDefaultValue('box2');
})

$w('#box3').onClick( (event) => {
    setDefaultValue('box3');
})

Now that you’ve got the default value, use it to determine which checkbox to insert, and build the item you want to insert accordingly.

If we assumed that you’re using a button to save submit the data, we’ll use the button’s onClick() event to check the values we want to insert like this:

$w('#button1').onClick(async (event) => {

     // First check if all the needed values are not undefined
     if (defaultValue !== undefined && $w('#input1').value !== undefined && $w('#input9').value !== undefined) {

     // Now build the item object according to the
     //value we got from our function
     let item = {}

     switch (defaultValue) {
     case 'box1':
                item = {
                    firstName: $w('#input1').value,
                    middleName: $w('#input9').value,
                    checkbox1: $w('#checkbox1').value
                }
     break;

     case 'box2':
                item = {
                    firstName: $w('#input1').value,
                    middleName: $w('#input9').value,
                    checkbox2: $w('#checkbox2').value
                }
     break;

     case 'box3':
                item = {
                    firstName: $w('#input1').value,
                    middleName: $w('#input9').value,
                    checkbox3: $w('#checkbox3').value
                }
     break;
            }
            
            // Insert the item
            await wixData.insert('collection', item)

        }
    })

I hope that helped you!
Ahmad