-SOLVED- Change text from database with via checkbox onChange

Ask the community
,
1

It works in my head but not in the real world… The checkbox codes works if I just show and hide elements i.e. if I connect the two fields via the database green icon to two separate text fields but I want to get it changing by drawing from the database to ease the setItem if used.

Many thanks in advance!

function privateCheckbox () {
 let Price = $w("#dynamicDataset").getCurrentItem();
 for (let i = 1; i < 3; i++) {
        $w(`#checkbox${i}`).onChange(() => {
 const checkBoxes = ['checkbox3', 'checkbox4'];
 let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
            filtered.forEach((checkbox) => {
                $w(`#${checkbox}`).checked = false;
            });
 if ($w('#checkbox1').checked) {
            $w('#pricePrivate1to1').text = Price.price11.toString();
            }
 if ($w('#checkbox2').checked) {
            $w('#pricePrivate1to1').text = Price.privatePrice12.toString();
            }
            });
    }
}
2

Hi Stephen,

I would like to help but I didn’t understand what you were trying to accomplish even when recreating your code, can you please elaborate and try to explain again in more detail?

Thanks in advance

  • Lior
3

Hi Lior,

Thanks for getting back to me. I will try to explain my problem again in some more detail. From the picture below, I’m trying to achieve when the user checks, 1:1 it shows £400 for the course, if they select 1:2 it will show £460 (this element is actually hidden, but I have shown it here for reference. I have the code below which works.

function privateCheckbox () {
 for (let i = 3; i < 5; i++) {
        $w(`#checkbox${i}`).onChange(() => {
 const checkBoxes = ['checkbox3', 'checkbox4'];
 let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
            filtered.forEach((checkbox) => {
                $w(`#${checkbox}`).checked = false;
            });
 if ($w('#checkbox3').checked) {
            $w('#pricePrivate1to1').show(), $w('#pricePrivate1to2').hide();
            }
 if ($w('#checkbox4').checked) {
            $w('#pricePrivate1to1').hide(), $w('#pricePrivate1to2').show();
            }
            });
    }
}

But I would like to extract the information straight from the database without using two separate boxes that are connected to the database through the ‘Connect to Data’ icon


The reason for this is to be able to setItem for the value of this text box ‘pricePrivate1to1’ to the payment screen. I hope this makes things a little more clear, but let me know if you need anything else to clarify.

Thank you for your help, Stephen

4

Ok, I think I understand, first of all, I would use radio buttons instead of checkbox because you want only one choice, am I right?
second, you can use an onChange on the radio button group, get the chosen value, and use a wixData.query() function to get the items while refining the query with the chosen value using the eq() function.
Like so:

$w("#radioGroup1").onChange((event, $w) => {
 let choosenValue = event.target.value;
        wixData.query("testCollection")
        .eq("private", choosenValue)
        .find()
        .then((results) => {
            $w("#text").text = results.items[0].price
        })
    });

I hope that is what you meant, if not, please elaborate so I can help you further!

  • Lior
5

Hi Lion,

Thank for the advice, and your correct Radio button would be easier, i just had the checkbox code in another part of the website so tried to transfer.

The code you have sent over I can’t seem to grasp how to get the price for the course that is on the dynamic page. I will try and explain a little more of what is working to populate the fields, I’m just struggling to get them to toggle when the other box is ‘checked’

503×598 47.9 KB

I’m have the below code which hopefully shows the outcome of what I’m trying to achieve.

export function radioGroup1_change(value, $w) {
 let Price = $w("#dynamicDataset").getCurrentItem();
 if (
(event.target.value === 'Radio Button1')  {
        $w('#pricePrivate1to1').text = Price.price11.toString();
    }
 if (event.target.value === 'Radio Button2') {
        $w('#pricePrivate1to1').text = Price.privatePrice12.toString();
    }
}

If I use this code in the onReady then it populates the fields, so I’m struggling to just get it to work within a toggle style onChange

let Price = $w("#dynamicDataset").getCurrentItem();
$w('#pricePrivate1to1').text = Price.price11.toString();
$w('#pricePrivate1to2').text = Price.privatePrice12.toString();
6

Got it! thank you for your help!

Here is the code if it helps anyone else.

export function radioGroup1_change(event) {
let Price = $w("#dynamicDataset").getCurrentItem();
if ($w("#radioGroup1").value === "1") {
        $w('#pricePrivate1to1').text = Price.price11.toString();
    }
if ($w("#radioGroup1").value === "2") {
        $w('#pricePrivate1to1').text = Price.privatePrice12.toString();
    }
}