Custom forms - Radio buttons

#1

I have built a custom form and a client is insistent we use radio button, but the crux of the matter is that there needs to be hidden content that is revealed on selection of multiple buttons.

The below code works for one option

** I would like to pay more than the mimimum contribution rate for my age**
%question_field_27933_q17%

%question_error_27933_q17%

I would like my regular monthly contributions to be%question_field_27933_q16%%

%question_error_27933_q16%
  

If I try using for another button it doesnt work and instead both bits of content ar next to each other rather than by the relevant radio button!?


** I would like to pay more than the mimimum contribution rate for my age**
%question_field_27933_q17%

%question_error_27933_q17%

I would like my regular monthly contributions to be%question_field_27933_q16%%

%question_error_27933_q16%
  

test

(Bart Banda) #2

Not sure I understand the issue fully. Can you explain a bit more about what the intended outcome you want on the frontend is and what you are currently getting?

#3

HI Bart,

I am building a custom form in Squiz Matrix using the question fields and driving it with html in the page contents section.

I am using the ‘Options Listy’ question type for a simple two option question. But what I am trying to achieve is revealing subsequent content / questions dependent on the radio button selected (this is something I have had no problem doing with a dropdown, but the client is insistent on radio buttons.

I have been able to configure content to appear on one option, but when I try applying to both it doesn’t work.

I will attach two screenshot of what is displaying, but the code used is

One option

You’re in the Auto Enrolment Category of the Accenture Retirement Savings Plan (ARSP). You can now change between Auto Enrolment and Main Category contribution rates. Please choose an option below: %question_field_27944_q3%
%question_error_27944_q3%
Test option 1%question_field_27933_q13%
%question_error_27933_q13%
  
Two options You’re in the Auto Enrolment Category of the Accenture Retirement Savings Plan (ARSP). You can now change between Auto Enrolment and Main Category contribution rates. Please choose an option below: %question_field_27944_q3%
%question_error_27944_q3%
Test option 1%question_field_27933_q13%
%question_error_27933_q13%
  
Test option 2%question_field_27933_q16%
%question_error_27933_q16%
  
#4

output%20-%20one%20option%20configured
output - one option configured.png936x194 11 KB
!

#5

Output%20-%20two%20options%20configured
Output - two options configured.png936x194 11.5 KB

(Bart Banda) #6

THanks Jay,
if it was working with a select field but not with radio buttons, it’s most likely something to do with your JavaScript that handles the show and hide. Are you getting any JS errors?

Check your HTML formatting and output as well, maybe the “Test option 2%question_field_27933_q16%” is simply located in the wrong part of the DOM somehow on the frontend?

#7

Hi Bart, unfortunately I don’t get involved with the JS side on these forms, generally just update the HTML in the page content and the CSS if necessary :-/

Could it be that I am using the wrong html?

#8

Inspecting the page it seems to indicate that the second option is not associated to the second radio button

image
image.png528x538 59.3 KB

#9

i have raised as ticket with Squiz support

(Bart Banda) #10

Yep, that looks like it, the incorrectly nested HTML. Let us know what Squiz support comes back with! :slight_smile: