Hide/Show elements using custom Javascript

[mmsa12]

Hi All,

I spend some time looking for this, so I though to post it here for anyone looking for it.

How to Hide/show elements based on value an element?

Select the javascript action "onLoad, onChange" you will have to add two javascript actually onload and onchange

var radioButton= document.getElementById('copy_paste_your_element_placeholder_for_radio_button').getValue();
var element1= Fabrik.getBlock('form_X').formElements.get('copy_paste_your_element_placeholder_for_element1');
 
if (radioButton=='1')
{
  elemnt1.show();
}
else if (radioButton=='0')
{
  element1.hide();
}

 

[zegmis]

Thanks man - took me a while to find this solution for Fabrik 3.1

 

[elle]

Thank you mmsa12!

That was the one I've looking for long time.

 

[ontarget]

Hi Thanks for posting this
I am trying to get this inline JS to work based on a selection from a drop down.
I am using the"change" function
If they select "Mixed" in the dd the text field options appear to add "Males" and "Females"
if they select "Male" the text field option to add Male pupils only is shown and Females are hidden.

var type = document.getElementById('sch_profiles___type').getValue;
var element1= Fabrik.getBlock('form_7').formElements.get('sch_profiles___PupilsMale');
var element2= Fabrik.getBlock('form_7').formElements.get('sch_profiles___PupilsFemale');
if (type=='mixed')
{
  element1.show();
  element2.show();
}
else if (type=='girls')
{
  element1.hide();
}
else if (type=='boys')
{
  element2.hide();
}

Thanks for any pointers!

 

[jfquestiaux]

Don't forget you have a "Javascript" tab in each element settings that handles this for you (no need to write code).

 

[ontarget]

I'm trying to do a custom javascript on a calc element (ajax enabled) on "Change" in the box "Write your own...." basically to save time
This is my code however elements 1 -3 refuse to hide themselves!!

var element1= Fabrik.getBlock('form_15').formElements.get('aaa_mentors___pref_hospital_school');
var element2= Fabrik.getBlock('form_15').formElements.get('aaa_mentors___pref_special_school');
var element3= Fabrik.getBlock('form_15').formElements.get('aaa_mentors___pref_special_classes');
if (this == 'Post Primary') {
element1.hide();
element2.hide();
element3.hide();
}

Any ideas why this code wont work?