Forums

Showing a simple html text element when a value is selected

sem 27 Oct, 2016
Hi. Banging my head against a wall here. I can easily hide elements (like input boxes) at load and when a radio option is selected show them via an event but what I'd like to do is:

Three options on a radio group, when any is selected a little html would appear underneath the field giving a little more info. For example, I ask a question like "What causes a headache" with 3 options. As soon as any is selected, a sentence "Other examples of causes for headaches are ........" would appear underneath.

I've had a play with custom div containers and set them hidden at load and then added an event action (using the events tab) for showing the container once an option is changed in the radio field but it won't work. The custom html element sat within the container will always show.

Or is there a better way of displaying some extra text once a value is selected? I'd like to do this for multiple questions on the form.

Any advice would be appreciated.
GreyHead 27 Oct, 2016
Hi sem,

You can show hide Containers using their IDs in the Event tab and setting the Initial View to Hidden in the Container settings.

In this case though I'd probably use a Custom Code element with the HTML for all of the extra text in separate <div>s (or <p>s if you prefer)
<div id='radio_1_tip' style='display: none;'>Sed magna purus fermentum</div>
<div id='radio_2_tip' style='display: none;'>Pellentesque dapibus hendrerit tortor</div>
<div id='radio_3_tip' style='display: none;'>Phasellus nec sem in</div>
Then you can use the Events to show/hide these. They get a bit cumbersome when you have to hide several elements so a function calling some JavaSCript might be simpler.

Bob
sem 27 Oct, 2016
Hey Bob. Yes separate event switches would be laborious. Not at PC right now but if I added a custom doc container, popped an HTML p in the code with the sentence, made it hidden then in the designer events tab added a show, onchange of the radio box, the container ID, do you think that would work?

Thanks, sem
GreyHead 27 Oct, 2016
Hi Sem,

That will show them OK, but you also have to add more events to hide the other two help <div>s each time - gets to be 9 events for three radio buttons or 16 for four - the count goes up exponentially.

Bob
sem 27 Oct, 2016
Hey Bob. That wouldn't be a problem because the way they want it, as soon as a user selects any option for a question, the help/extra info appears and will stay there. So I only ever need to unhide a hidden div once and leave it at that till the form is submitted. So that'll save on extra hide actions - or that's my thinking anyway. Thanks - I'll give this a go in a little while.

sem
This topic is locked and no more replies can be posted.