[SOLVED] Hide/Show 5 Form elements based on value of 3 radio button fields

[marcq]

Hi,

I can't figure out how to solve this in one of my form group :

If these three elements (Yes/No Buttons) are set to No (0)
gprh_fabrik_user_enrollment___ouverture_etabl
gprh_fabrik_user_enrollment___reprise_expl
gprh_fabrik_user_enrollment___exploitant_etabl

Then these five field elements needs to be hidden
gprh_fabrik_user_enrollment___indication_suppl
gprh_fabrik_user_enrollment___nom_etablissement
gprh_fabrik_user_enrollment___adresse
gprh_fabrik_user_enrollment___nap
gprh_fabrik_user_enrollment___localite_etabl

But if one of the three elements is set to Yes (1) then all the five field elements needs to be shown.

I have tried many thing (js file / Element Javascript), but I'm unable to create this scenario.

Would appreciate some help.

Thanks in advance,

Marc

 

[cheesegrits]

Yeah, you won't be able to do that with the built in element JS events.

function doShowHide() {
   var form = Fabrik.getBlock('form_X');
   if (form.formElements.get('gprh_fabrik_user_enrollment___ouverture_etabl').getValue() == '0' && form.formElements.get('gprh_fabrik_user_enrollment___reprise_expl').getValue() == '0' && form.formElements.get('gprh_fabrik_user_enrollment___exploitant_etabl').getValue() == '0') {
   }
      form.formElements.get('gprh_fabrik_user_enrollment___indication_suppl').hide();
      form.formElements.get('gprh_fabrik_user_enrollment___nom_etablissement').hide();
      form.formElements.get('gprh_fabrik_user_enrollment___adresse').hide();
      form.formElements.get('gprh_fabrik_user_enrollment___nap').hide();
      form.formElements.get('gprh_fabrik_user_enrollment___localite_etabl').hide();
   else {
      form.formElements.get('gprh_fabrik_user_enrollment___indication_suppl').show();
      form.formElements.get('gprh_fabrik_user_enrollment___nom_etablissement').show();
      form.formElements.get('gprh_fabrik_user_enrollment___adresse').show();
      form.formElements.get('gprh_fabrik_user_enrollment___nap').show();
      form.formElements.get('gprh_fabrik_user_enrollment___localite_etabl').show();
   }
}

Change the X in form_X to your form's numeric ID. Put the code in ./components/com_fabrik/js/form_X.js. Add load and click events to the three yes/no elements, with ...

doShowHide();

... as the code.

-- hugh

 

[marcq]

Thank Hugh !

In fact I tried something similar and it doesn't work.

1. Script is in form_30.js file located in /components/com_fabrik/js/
2. form_X is set to form_30 which is the form ID
3. load and click + doShowHide(); (changed the name with situation(); are defined in the 3 Elements Javascript

You can try

http://webamazingapps.com/projects/gprh.ch/index.php/centre-de-formation/inscription-formation

"Faisons le point sur votre situation" Tab

Nothing happens...

 

[marcq]

I can see an uncaught reference error

 

[cheesegrits]

You really need to learn how to use a JS debugger.

http://screencast.com/t/Rr1ST3zoJX

So add that missing close brace.

You also seem to have something trying to run a function situation() which doesn't exist.

-- hugh

 

[marcq]

You really need to learn how to use a JS debugger.

http://screencast.com/t/Rr1ST3zoJX

So add that missing close brace.

You also seem to have something trying to run a function situation() which doesn't exist.

-- hugh

You're right ! I started with firebug and I could find a second error with a close brace that I had to remove. And now it is working !

Thanks a lot Hugh, I really appreciate your support which enable me to learn a lot.

Marc