Multiple Checkbox Filtering With Dataset

Ask the community
,
1

I have a table that is connected to a dataset (that is generated from a form submission). I want to be able to filter the Classes Offered field from my database based on the checkboxes that I have selected (could be 1 or multiple checkboxes selected at once to filter the data). But my code seems to only be working with one checkbox selected.

Can someone help me determine the issue or if there is a better way for this to work. I have attached a picture and my code.

Here is a picture of page with table

991×501 49.3 KB

Here is my code

import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
$w(“#checkbox1”).value = ‘’; //by having ’ ’ it makes the value equal ‘nothing’ when the page is loaded
$w(“#checkbox2”).value = ‘’;
$w(“#checkbox3”).value = ‘’;
$w(“#checkbox4”).value = ‘’;
$w(“#checkbox5”).value = ‘’;

});

export function checkbox1_click() {
Basic();
}

export function checkbox2_click() {
Advance();
}

export function checkbox3_click() {
Junior();
}

export function checkbox4_click() {
Extreme();
}

export function checkbox5_click() {
Toning();
}

//because the page started with all the value to equal ‘nothing’, now we will set the values to equal the real value

function Basic() {
if ($w(“#checkbox1”).value === ‘’) {
$w(“#checkbox1”).value = ‘Basic’;
}
else {
$w(“#checkbox1”).value = ‘’;
}
}

function Advance() {
if ($w(“#checkbox2”).value === ‘’) {
$w(“#checkbox2”).value = ‘Advance’;
}
else {
$w(“#checkbox2”).value = ‘’;
}
}

function Junior() {
if ($w(“#checkbox3”).value === ‘’) {
$w(“#checkbox3”).value = ‘Junior’;
}
else {
$w(“#checkbox3”).value = ‘’;
}
}

function Extreme() {
if ($w(“#checkbox4”).value === ‘’) {
$w(“#checkbox4”).value = ‘Extreme’;
}
else {
$w(“#checkbox4”).value = ‘’;
}
}

function Toning() {
if ($w(“#checkbox5”).value === ‘’) {
$w(“#checkbox5”).value = ‘Toning’;
}
else {
$w(“#checkbox5”).value = ‘’;
}
}

function valueCombine() {
let checkedValue = $w(“#checkbox1”).value + “” + $w(“#checkbox2”).value + “” + $w(“#checkbox3”).value + “” + $w(“#checkbox4”).value+ “” + $w(“#checkbox5”).value;
$w(“#input1”).value = checkedValue;
}

export function button1_click(event, $w) {
valueCombine();
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“classesOffered”, $w(“#checkbox1”).value + “” + $w(“#checkbox2”).value + “” + $w(“#checkbox3”).value + “” + $w(“#checkbox4”).value+ “” + $w(“#checkbox5”).value)
);
}

2

Hey,

Using arrays and wixData Filter’s .hasSome function will help you achieve your goal.

Shan

3

hey these guys helped me in the past, maybe they can help you too https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-MULTIPLE-CHECKBOX-FILTERS

4

I was looking at the link and it looks like great information I have modified the code and Iam trying to filter a table not a repeater maybe this is throwing me off. I run it in preview and the console has nothing populated and the table has nothing populated.

Here is my new code I created a separate page to test this on

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

import wixData from ‘wix-data’;

function ClassFilter() {

    wixData.query("Locations") 

            .eq("Basic", $w("#checkbox1").checked) 

            .or( 

                    wixData.query("Locations") 

                    .eq("Advance", $w("#checkbox2").checked) 

            ) 

            .or( 

                    wixData.query("Locations") 

                    .eq("Junior", $w("#checkbox3").checked) 

            ) 

            .or( 

                    wixData.query("Locations") 

                    .eq("Extreme", $w("#checkbox4").checked) 

            ) 

            .or( 

                    wixData.query("Locations") 

                    .eq("Toning", $w("#checkbox5").checked) 

            )

// add or statements for the other checkboxes

            .find() 

            .then((results) => { 

                    console.log(results.items);

let Classes = results.items;

                    $w('#table1').rows = Classes; 

            }) 

            . **catch** ((err) => {

let errorMsg = err;

                    console.log(errorMsg); 

            });

}

$w.onReady( function () {

    ClassFilter();

});

export function checkbox1_change(event) {

    ClassFilter();

}

export function checkbox2_change(event) {

    ClassFilter();

}

export function checkbox3_change(event) {

    ClassFilter();

}

export function checkbox4_change(event) {

    ClassFilter();

}

export function checkbox5_change(event) {

    ClassFilter();

}