Save the State of Checkboxes for All Users After Refreshing the Site

I am pretty new to coding and want to make it so that once anyone checks particular checkboxes on my site, this is saved until they are unchecked. Currently, after someone checks a checkbox and reloads the page, the check doesn’t save. My hope is to make an interactive page where anyone with access to it can check any checkbox and have this be saved for others to see.

Please let me know if there is code that can be used to achieve this. Thanks!

If you wanted to save it just for that individual user it would be easy to do with velo code. It’s not super hard to do what you want to do, but there are more steps and also use the Content Manager.

  1. Make a Collection (must be set to hold Multiple items, which is the default), call it Checkboxes.

  2. Click on the 3 dots by Add item and go into Collection settings. Go into Additional settings and change from Site Content Custom Use.

  3. Update the fields to give the permissions you want. The important ones for this is to let them read content and update content.

  4. Make as many fields as you need checkboxes and set their Field type to Boolean (this will let them hold if it’s checked or not). You can give them meaningful names, but for this example I’ll just call them Checkbox1, Checkbox2 and so on.

  5. Add the checkboxes to your site that you want (I will assume they’re named #checkbox1, #checkbox2 and so on)

  6. Turn on developer mode

  7. Paste this code in the code field:

import wixData from 'wix-data';
let ID;
let box1;
let box2;
$w.onReady(function () {
    wixData.query("Checkboxes").find().then((results) => { //Gets the values from the content manager
        ID = results.items[0]._id; //Saves the ID for when you need to update

        box1 = $w('#checkbox1'); //gives the checkbox an easier to use name
        box2 = $w('#checkbox2');

        box1.checked = results.items[0].checkbox1 //Sets the value of checkbox1 to the value held in the database for Checkbox1 when the page loads
        box2.checked = results.items[0].checkbox2 //Sets the value of checkbox2 to the value held in the database for Checkbox2 when the page loads

        box1.onChange(() => {   //When checkbox 1 is changed it updates the database with the new settings
            updateAll()
        })

        box2.onChange(() => {   //When checkbox 1 is changed it updates the database with the new settings
            updateAll()
        })
    })
 
});

//This function updates all (2) of the checkboxes, if you want more than 2, add checkbox3 and so on
function updateAll() {
    console.log("Update")
    //Sets what fields to update, to update more add the extra fields, but _id got to remain
    let updatedFields = {
        _id: ID,
        checkbox1: box1.checked,
        checkbox2: box2.checked
    }
    wixData.update("Checkboxes", updatedFields).then((results)=>{
        console.log(results)
    })
}

This example shows it working with 2 checkboxes, but if you want more you can add extra

That worked great, thanks! There is one more thing I wanted to add if possible. I want to make it so that after a period of time, let’s say a month for the first checkbox and a year for the second checkbox, the checkbox will become automatically unchecked. I would want this to repeat in a cycle. Since I am using checkboxes for a task list, this would mean that someone wouldn’t need to uncheck everything once a certain period that tasks need to be completed in is over. It would happen automatically!

1 Like

That is possible to do, we’d need to restructure the database a bit, and do some stuff that is a bit harder to explain. I unfortunately don’t have time to write it out right now.

1 Like

@simen Thanks for getting back so fast, your instructions so far have been incredibly helpful! Take your time and get back to me when it’s possible.

1 Like

@simen Just wanted to follow up! Please let me know when you have time