Dynamic Button Action Based on Radio Selection in Wix

Discussion Ask a question
,
1

Hello, I’m trying to implement dynamic behavior on my Wix site where a single “book now” button redirects to different URLs depending on the service selected via radio buttons. Initially, for the first service, the button correctly redirects, displaying associated service details. However, when selecting other services, the button doesn’t redirect to the new URLs as intended. It seems the event handling might not be updating correctly. Has anyone encountered this issue or can offer insight into dynamically changing a button’s action based on user input?

2

Can you share your code too? Do you use JS + Velo or dataset UI elements to achieve this logic? If you use code please share your code so we can help better.

3

Hi Loeix!

Yes, I used the following code:

import wixLocation from ‘wix-location’;

$w.onReady(function () {
hideElements();
showElementsForRadioButton1();

// Gestionnaire de clic pour le bouton
$w(“#button156”).onClick(() => {
const selectedValue = $w(“#radioGroup3”).value;
if(selectedValue === “Radio button1”) {
wixLocation.to(“https://www.clearsmile.ch/promoprintemps-detartrage”);
} else if(selectedValue === “Radio button2”) {
wixLocation.to(“https://www.clearsmile.ch/promoprintemps-blanchiment”);
} else if(selectedValue === “Radio button3”) {
wixLocation.to(“https://www.clearsmile.ch/promoprintemps-detartrage-blanchiment”);
}
});

function hideElements() {
// Cachez tous les éléments de prix, de réduction et le bouton
$w(“#textPrice1”).hide(); $w(“#textPrice2”).hide(); $w(“#textPrice3”).hide();
$w(“#oldPrice1”).hide(); $w(“#oldPrice2”).hide(); $w(“#oldPrice3”).hide();
$w(“#reduction1”).hide(); $w(“#reduction2”).hide(); $w(“#reduction3”).hide();
$w(“#button156”).hide();
}
});

4

console.log the selectedValue each time you click (but do not redirect to any url) and see if the selectedValue is what you expect.

If it’s not what you expect then there is a big chance that your radio buttons values are different than what’s written in your code.

If you want to share the URL of the page I can also try to understand it.

And please when you share a code use code blocks like that:

<```js
codes here (remove the <> later)
```>
5

Not sure I did the change correctly as it still doesn’t work. I’ve looked at the radio buttons values and they are correct as well.

Here is the URL:

6

It works correct on my end. It’s going to selected URLs based on the selection. So it works or did I understand your problem wrong?

When I choose the 3rd option it goes to: https://www.clearsmile.ch/promoprintemps-detartrage-blanchiment
When I choose 2nd: https://www.clearsmile.ch/promoprintemps-blanchiment
And if I choose the first: https://www.clearsmile.ch/promoprintemps-detartrage

So basically it works fine on my end.

7

Never mind it works on my end as well! Thanks a lot for the help.