Event handler using radio button value not working

Ask the community
,
1

I am trying to run an onChange event using the radio button value. Nothing happens when I run my code. I have researched on here but can’t find the answer.
The event triggers an expand/collapse state on a few boxes. Here is my code:

export function directorYesNo_change(event) {
console.log($w("#directorYesNo").value);
if ($w("#directorYesNo").value==="directorNo") {
$w("#text432").expand();
$w("#contactPosition").expand();
} else {
$w("#contactTelephone").collapse();
$w("#contactEmail").collapse();
}
if ($w("#directorYesNo").value==="directorYes") {
$w("#contactTelephone").expand();
$w("#contactEmail").expand();
} else {
$w("#text432").collapse();
$w("#contactPosition").collapse();
}
}

Radio Button group = directorYesNo
Values directorYes / directorNo

Any advice would be appreciated.

2

Try onClick instead of onChange. I have noticed that in Wix radio buttons, onChange generates two events.

3

Thanks for this. The result is the same with onClick. I’ve noticed that in the debugger window this line in my code is referenced:

console.log($w("#directorYesNo").value);

I don’t know what is wrong in this line (if anything)

4

@dean41146 Referenced how? What are you getting?

5

@yisrael-wix

3828×136 5.5 KB

The screenshot may be a bit small, but on the left hand side one of the radio button values is mentioned (directorNo). On the right hand side the line number from my code is mentioned, and that’s the line I highlighted previously.

6

@dean41146 And what’s the problem? The console.log() displayed the current value of the RadioButtonGroup. How are you setting up your Radio Buttons? See the options property API for information.

7

@yisrael-wix I’m adding the buttons in the editor, and then editing existing values and/or adding new ones. Even though the console.log() displayed the current value of the RBGroup, the action required by the code did not execute. I’m trying to understand why?

8

@dean41146 hmmm, didn’t see this before, but if you check your logic, this is what happens…

The second if undoes what the first one does. You probably need something like this:

if ($w("#directorYesNo").value === "directorNo") {
    $w("#text432").expand();
    $w("#contactPosition").expand();
    $w("#contactTelephone").collapse();
    $w("#contactEmail").collapse();
}
else if ($w("#directorYesNo").value === "directorYes") {
    $w("#text432").collapse();
    $w("#contactPosition").collapse();
    $w("#contactTelephone").expand();
    $w("#contactEmail").expand();
}

Depends on what you want to expand and collapse based on the value.

9

To add on, make sure that the value that the user is choosing in the radio button value is the same that you are using in your code.

The radio button consists of two parts - label and value - the label is what your user will be shown on screen, the value is what is saved in your dataset or used in your code.

So, in your case you need the radio button values to be ‘directorNo’ and ‘directorYes’ for your code to work with your radio button element.

Whether as Yisrael has already stated if you have done it through code ( https://www.wix.com/corvid/reference/$w.RadioButtonGroup.html#options

Or with the value settings in the radio button settings themselves.
https://support.wix.com/en/article/manage-radio-buttons

10

Also, make sure that you have actually added the onChange or onClick event to the properties panel for that radio button element.

See my last reply in this previous post for a working example like Yisrael has already given you above too.
https://www.wix.com/corvid/forum/community-discussion/show-hide-fields-in-wix-forms-with-code/p-1/dl-5e6fb52202309e001708a0d4-5e6f5e98e0cbe200179ebba8-1

11

Thank you all very much for your help. The problem has been resolved.