Page 1 of 1

Interactive Buttons

Posted: Wed Nov 17, 2021 11:59 am
by roygore
Is it possible to link two or more buttons interactive so that when clicking on one button it turns the other buttons off?

For example: I want to set up a list of options each with a button for users to choose from. They can only select one of the oprions. So when they click one of the buttons it automatically deselects the other buttons.

Here is an example of the kind of thing I want to create with just two options: https://use-lasting-power-of-attorney.s ... uk/cookies

I've tried to find a way of getting two buttons to interact using 'Events' to turn the other button off onclick, but so far no good. I've also tried using 'Conditions', but no luck.

Does anyone know of an extension that will do this?

If no extension does anyone know of a way to achieving what I need?

Roy

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 12:35 pm
by Pablo
This may be possible with conditions:
https://wysiwygwebbuilder.com/conditions.html

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 1:46 pm
by roygore
Thanks Pablo

I will give it a try.

Roy

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 1:55 pm
by crispy68
Could you use form radio buttons?

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 2:07 pm
by roygore
Thank crispy68,

I've been working with Radio Buttons but I can't get them to interact.

Would be perfect if I could get the to work as required.

Roy

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 3:44 pm
by roygore
I see that the Form Wizzard extension has a panel with buttons that do exactly what I need.

How is it done in Form Wizzard?

Roy

Re: Interactive Buttons

Posted: Wed Nov 17, 2021 3:55 pm
by crispy68
for radio buttons to work, they need to be part of a form. It may help to read up on forms here: https://www.wysiwygwebbuilder.com/forms.html

Re: Interactive Buttons

Posted: Thu Nov 18, 2021 5:45 pm
by roygore
Hurray! Got it sorted! Click here on my test site and scroll down the page: https://rlgconsulting.co.uk/testing/tri ... okies.html

Solution:
  • 1- Create form in a Layout Grid
    2- Insert 2 Radio Buttons (or Check Boxes) and call them 'One' and 'Two'
    3- Insert the buttons each into it's own Layout Grid (This is necessary to get the buttons to align vertically rather than horizonaly; also helps to adjust vertical spacing)
    4- Drage both button Layout Grids into one of the panels of the empty Layout Grid
    5- Adjust the Layout Grid panel holding the buttons to 1 unit wide to make the buttons stack
    6- Add a button and label it 'Confirm' (or as required)
    7- Settings for button 'One':
    Set Initial State to: 'Selected'
    Add a Condition: Condition = 'Selected'; Action = 'Disabled' ; Target = 'ID of buton Two'
    8- Settings for button 'Two':
    Set Initial State to: 'Selected'
    Add Conditions: Condition = 'Selected'; Action = 'Disabled' ; Target = 'ID of buton One'
    Add Condition: Condition = 'Not Selected'; Action = 'Disabled' ; Target = 'ID of Confirm button' (Inhibits Confirm button until Radio Button Two is selected)
    Add Condition: Condition = 'Selected'; Action = 'Enable' ; Target = 'ID of Confirm button' (Enables Confirm button when Radio Button Two is selected)
    '
I hope that makes sense. It seems to be working - of course it doesn't actually remove or disable the cookies.

Happy to share.

Roy

Note; It's a shame the forum drops the spaces - the steps above looked nicely layed out and easy to follow when I typed it.