I have a list of checkboxes on a page. I want to write a code on wix so that if a user ticks a checkbox, it is disable and stays like that even when the user leaves the page or the page is refreshed or the browser is closed.
Below (fig.1) is what the box looks like when ticked, this works fine and I’m happy with it.
However, as soon as the page is refreshed, or I visit another page in my website, all of the above goes away and I’m back to empty checkboxes, see fig. 2.
From my research, I have learnt that I need to save the information on the page to Wix’s local storage to keep this data/checked state on the page. I have tried to do that with the code I could find on corvid but I’m really stuck, please help.
I’m copying my code for this page below, I’m sure I’ve gone wrong with the local storage code, especially with the key and value but I’m just not sure how exactly.
I thought I might store each checkbox individually, so I started with one to see how it would work, and it doesn’t.
Page code:
export function checkbox2_click_1(event) {
$w(‘#checkbox2’).disable();
$w(“#button1”).show();
}
import { local } from ‘wix-storage’;
// …
local.setItem(“checked”, “$w (‘#checkbox2’”); let value = local.getItem(“checked”); // “value”
export function checkbox3_click(event) {
$w(‘#checkbox3’).disable();
}
export function checkbox4_click(event) {
$w(‘#checkbox4’).disable();
}
Use an array to store the checkbox id. You will need to .stringify() the array before storing it then upon page load .parse() the string and run a check.
import {session} from 'wix-storage';
$w.onReady(function () {
let val = session.getItem('array');
if(val) {
let newArray = JSON.parse(val);
if(newArray.length > 0) {
newArray.forEach( (item) => {
$w(`${item}`).disable();
});
}
}
});
var array = [];
export async function checkbox1_change(event) {
if($w("#checkbox1").checked === true) {
$w("#checkbox1").disable();
await array.push('#checkbox1');
let valve = JSON.stringify(array);
session.setItem('array', valve);
}
}
export async function checkbox2_change(event) {
if($w("#checkbox2").checked === true) {
$w("#checkbox2").disable();
await array.push('#checkbox2');
let valve = JSON.stringify(array);
session.setItem('array', valve);
}
}
Hi, I am having a similar issue. I would like to incorporate a checklist on my site - sort of a To Do list. This to-do list includes a single checkbox for each item (starting 12 months out from an event, so altogether it has 176 checkboxes). I would like visitors to be able to check off the items that they have completed vs. leaving the ones blank that still need to be completed. I tried to use this code, however, when the visitors leave the page, the checkboxes are all blank again. Do I need to include up to “checkbox 176” in my code? I am not familiar with using code at all, so any help would be much appreciated!
