How to make a check buttons saving data to the collection in Wix

The result is shown in the video.

First of all, create buttons, give them id and create an action “On click”:

Then, create a dataset for collection, and a submit button to save all data and to perform an action on success.Now, let’s take a look at the code:

export function agreeButton_click(event, $w) { event.target.style.backgroundColor = "#1D2CF3"; $w("#disagreeButton").style.backgroundColor = "#D6D6D4"; $w("#notSureButton").style.backgroundColor = "#D6D6D4"; $w("#datasetExample").setFieldValue("fieldExample", "Agree"); }

export function disagreeButton_click(event, $w) { event.target.style.backgroundColor = "#1D2CF3"; $w("#notSureButton").style.backgroundColor = "#D6D6D4"; $w("#agreeButton").style.backgroundColor = "#D6D6D4"; $w("#datasetExample").setFieldValue("fieldExample", "Disagree"); }

export function notSureButton_click(event, $w) { event.target.style.backgroundColor = "#1D2CF3"; $w("#disagreeButton").style.backgroundColor = "#D6D6D4"; $w("#agreeButton").style.backgroundColor = "#D6D6D4"; $w("#datasetExample").setFieldValue("fieldExample", "Not Sure"); }

Let’s break down a function

event.target.style.backgroundColor = "#1D2CF3";

This part makes button selected by setting its background color.

$w("#disagreeButton").style.backgroundColor = "#D6D6D4"; $w("#notSureButton").style.backgroundColor = "#D6D6D4";

Now, we have to unselect all other buttons if any selected. We do that by setting their backgrounds default color.

$w("#datasetExample").setFieldValue("fieldExample", "Agree");

And as the last step, we set a value for a field, where fieldExample field name and Agree is a string argument to be written in a collection.

NOTE! To save data to collection immediately use save() method. In our case, it’s not obligatory, because we have a Save button.