CheckboxGroup value returning null even though it's defined

Ask the community
,
1

Hi all,

So I have a form with a checkboxGroup in it named checkboxGroup1, checkboxGroup2 and checkboxGroup3 respectively. I’ve also set the checkbox to required.

846×523 23.8 KB

Hence, when I tried to get the value of the selected items as per the docs through

let howDidYouHearAboutUs = $w('#checkboxGroup3').value; // list
let yearOfExam = $w('#checkboxGroup3').value; // list
// expecting ['value', 'value2']

However I am met with a error code of:
Wix code SDK Warning: The value parameter of “checkboxGroup1” that is passed to the value method cannot be set to null or undefined.

I’m struggling to figure out why this is happening and any help would be appreciated.

Thanks!

2

Hallo,

try to figure out if it is a “type-error” for example: console.log(typeof …)
and look what you get when you do a “console-log” —>

console.log($w('#checkboxGroup3').value)
3

Firstly note that the checkbox group lets the user choose more than just the one option, so your setup allows the user to choose more than just the one checkbox and submit their answers without any error.

If you want to have just the one answer only, the easiest way is to just use single checkboxes and then you have two options:

  • Add an onClick event for each checkbox, simply set the other three to disable so that they are greyed out;

  • Add a onChange event loop that runs for all checkboxes so that when one is ticked, the others get unticked.

You can find previous posts for this along with code samples if you use the search option in this forum.

As for the values of each checkbox group, if you simply follow the code example for checkbox group and just add ‘let myvalue =…’ in or after the pages onReady function, then you won’t get any value returned in the dev console when you test it in preview mode as it will have run when the page has loaded.

The same with if you have just also added the console log command after the let lines, you can’t get any values returned if you do it with or after the page onReady function.

To get a value in the dev console in the preview mode, then you need to have an event happen for each checkbox group to return a value for you.

This can either be an onChange event for each checkbox group or an onClick event on a simple submit button.

So on each onChange event you would add the console log line for that specific checkbox or you add them all for the onClick event.

Then when the user chooses an option in the checkbox group, with an onChange event the value is added immediately, whereas with the onClick it will only return values when you click on the submit button.

Whether you use an onChange or onClick event on your page, you will only get a value returned for your let lines after the event happens.

Then you can use your keywords for the let lines as you wish in your code.

Finally, remember that the values from checkbox groups are returned in an array, so you will still get an array return of [‘value1’] even if the user is just able to choose the one option.

If you switch to the single checkbox option, then you will just get the one value returned from whatever checkbox the user has chosen.

4

Also, remember that checkboxes and radio buttons and dropdowns have labels and values.

The labels are what the user sees on the website and the values are what are used in the code.

So any value used in your code must match exactly to the value that you have setup within the element settings itself.

5

Thanks GOS for your answer. I put it under a onclick event (submit button) and I still have the same error in the preview mode for some reason.
This is a snapshot of what I have currently.

$w.onReady(function () {
            $w('#text64').hide();

             // On form submit
            $w('#button1').onClick(() => {

                        studentName = $w('#input5').value;
                        targetSchool1 = $w('#input4').value;
                        targetSchool2 = $w('#input6').value;
                        targetSchool3 = $w('#input2').value;
 let tutoringType = $w('#checkboxGroup1').value; // list
 let howDidYouHearAboutUs = $w('#checkboxGroup3').value; // list
 let yearOfExam = $w('#checkboxGroup3').value; // list
                        console.log($w('#checkboxGroup1').value)

...
...

Thanks for your advice so far! No clue why this is happening, would appreciate some further help :)!

6

Oh Geez I’m so sorry for wasting your time on this! It was a mismatch of brackets which I somehow didn’t spot as I frantically tried to solve the problem at 1 am! It’s now working and thanks so much for your help!

7

@zerokey25

No worries, the simple mistakes are always the hardest to spot, don’t worry we have all been there too and it will happen again i can guarantee you :wink:

Even though you have fixed it and it is working you for, I had done a little code sample to paste here if you were still stuck and I will post it up anyway.

The code below will get the checkbox values through the onChange event on each checkbox group and the onClick event on the button itself.

So, if you use onClick as you have done then just delete the onChange parts or delete the onClick part if you wanted to use the onChange parts.

Plus, as you have used code with the event handler function written into it, you won’t need to add the event from the properties panel, so obviously you just need to change the export functions as well.

$w.onReady(function () {
});

let checkbox1 = $w("#checkboxGroup1").value;
let checkbox2 = $w("#checkboxGroup2").value;
let checkbox3 = $w("#checkboxGroup3").value;

export function checkboxGroup1_change(event) {
console.log($w('#checkboxGroup1').value)
}

export function checkboxGroup2_change(event) {
console.log($w('#checkboxGroup2').value)
}

export function checkboxGroup3_change(event) {
console.log($w('#checkboxGroup3').value)
}

export function button1_click(event) {
console.log($w('#checkboxGroup1').value)
console.log($w('#checkboxGroup2').value)
console.log($w('#checkboxGroup3').value)
}