Skip to main content
Greenprints Clean NRG
Greenprints Clean NRG
Known Participant
September 16, 2020
Answered

How to use Radio Buttons to toggle between Display/Hide of two different groups of fields

  • September 16, 2020
  • 1 reply
  • 6816 views

Good afternoon! I have Radio Buttons in my form. I would like a certain group of fields to be seen, and the other group of fields to be hidden. When any of the "no" buttons are hit, then I would like the opposite to happen.

 

When the radio button is marked "yes" I would like: 

Field 1 = "visible"

Field 2 = "visible"

Field 3 = "visible"

Field 4 = "hidden"

Field 5 = "hidden"

Field 6 = "hidden"

 

When the radio button is marked "no" I would like:

Field 1 = "hidden"

Field 2 = "hidden"

Field 3 = "hidden"

Field 4 = "visible"

Field 5 = "visible"

Field 6 = "visible"

 

I've seen and tried a lot of code for the checkboxes, and I can get it to work occasionally, but I can't figure out how to apply it to the radio buttons. At one point, I did give up on the Radio Buttons and tried to use checkboxes instead, but then I couldn't get the last 4 of the 12 fields to reappear after unchecking the checkbox. Is there a limit to the number of fields a code can apply to? I went to try to copy the code to put it here, but I think I deleted it all. So, since I'm here already asking for help with this problem, I figured I'd find out how to do it with the Radio Buttons.

This topic has been closed for replies.
Correct answer ls_rbls

With radio button this is very easy to do, specially if you're learning.

 

Since radio buttons work in pairs, all you have to do is create a pair of radio button and set them up as mutually exclusive.

 

This means that you name both radio buttons with the same field name but assign a different export value to each one.

 

After you assigned a unique name for your radio buttons, right-click on Choice 1 radio button select Properties from the context menu, go to the , "Options" tab--->> enter an export value . And in the "Actions" tab you place your script.

 

The same is true if you use checkboxes. you can make them behave as radio buttons.

 

So, once you create  your pair of radio buttons and set them up with a different export value (like "Choice 1, Choice 2, for example), all you have to do then is to copy the code below  and use it in the Choice 1 radio button:

 

 

this.getField("Field 1").display = display.visible; 
this.getField("Field 2").display = display.visible; 
this.getField("Field 3").display = display.visible; 
this.getField("Field 4").display = display.hidden; 
this.getField("Field 5").display = display.hidden;
this.getField("Field 6").display = display.hidden;

 

 

And use this script in the Choice 2 radio button:

 

 

this.getField("Field 2").display = display.hidden; 
this.getField("Field 3").display = display.hidden; 
this.getField("Field 4").display = display.visible; 
this.getField("Field 5").display = display.visible; 
this.getField("Field 6").display = display.visible;

 

 

There are many other ways to accomplish this with javascript but this is the easiest method and also the easiest to explain in a very brief manner.

1 reply

ls_rbls
Community Expert
ls_rblsCommunity ExpertCorrect answer
Community Expert
September 16, 2020

With radio button this is very easy to do, specially if you're learning.

 

Since radio buttons work in pairs, all you have to do is create a pair of radio button and set them up as mutually exclusive.

 

This means that you name both radio buttons with the same field name but assign a different export value to each one.

 

After you assigned a unique name for your radio buttons, right-click on Choice 1 radio button select Properties from the context menu, go to the , "Options" tab--->> enter an export value . And in the "Actions" tab you place your script.

 

The same is true if you use checkboxes. you can make them behave as radio buttons.

 

So, once you create  your pair of radio buttons and set them up with a different export value (like "Choice 1, Choice 2, for example), all you have to do then is to copy the code below  and use it in the Choice 1 radio button:

 

 

this.getField("Field 1").display = display.visible; 
this.getField("Field 2").display = display.visible; 
this.getField("Field 3").display = display.visible; 
this.getField("Field 4").display = display.hidden; 
this.getField("Field 5").display = display.hidden;
this.getField("Field 6").display = display.hidden;

 

 

And use this script in the Choice 2 radio button:

 

 

this.getField("Field 2").display = display.hidden; 
this.getField("Field 3").display = display.hidden; 
this.getField("Field 4").display = display.visible; 
this.getField("Field 5").display = display.visible; 
this.getField("Field 6").display = display.visible;

 

 

There are many other ways to accomplish this with javascript but this is the easiest method and also the easiest to explain in a very brief manner.

Greenprints Clean NRG
Greenprints Clean NRGAuthor
Known Participant
September 16, 2020

Hi ls_rbls,

 

Is that ALL I need? Because, I do have that, but I thought the thing that was tripping me up was the if/then part:

 

if (event.target.value != "Off") {

// box is checked

} else{

// box is unchecked}

 

I know that's checkboxes, but I want to know what it is for Radio Buttons.

 

 

    ls_rbls
    Community Expert
    ls_rblsCommunity Expert
    Community Expert
    September 16, 2020

    That is all you need.

     

    The script that you posted above works better with checkboxes.

     

    In the case of radio buttons one is always checked by default, and to uncheck them you always need a button or similar with a script to reset them.  With check boxes you can uncheck each one manually, even if they're set as mutually exclusive.

     

    So, like I said the easiest way is to split the script as I illustrated it above. The conditional statements are not that necessary unless you're planning to execute more complex operations that involve other field objects..

     

    But if you want to run the script above from only one radio button , like from Choice 1 radio button, then you can use it like this:

     

     

     

    
if(event.value !=="Off") {

this.getField("Field 2").display = display.hidden; 
this.getField("Field 3").display = display.hidden; 
this.getField("Field 4").display = display.visible; 
this.getField("Field 5").display = display.visible; 
this.getField("Field 6").display = display.visible; 

} else {

if (event.value =="Off") {

this.getField("Field 2").display = display.hidden; 
this.getField("Field 3").display = display.hidden; 
this.getField("Field 4").display = display.visible; 
this.getField("Field 5").display = display.visible; 
this.getField("Field 6").display = display.visible; 

  }
}

     

     

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices