Show/hide elements with Javascript - cannot get code to work

[degarrin]

Hello. I do not have much JavaScript experience yet, so I hope that someone can help me figure out what I have done wrong here, as I am at a loss after searching the forum and wiki. I am on Joomla 3.4.1 and Fabrik 3.3.2.

I have a form that has an element ('fab_affirmations___optional_services') that asks a question. Based on the two available options that you can pick in the ('fab_affirmations___optional_services') element, I want two other elements ('fab_affirmations___ring_exchange') and ('fab_affirmations___unity_candle') to show/hide = show if its option was chosen, hide if it wasn't.

The ('fab_affirmations___optional_services') element is a radiobutton plugin. There are two options to choose in this plugin: Ring Exchange has a value of 1 and Unity Candle has a value of 2. Within this main element I tried setting JavaScript onchange and onload code for each of the two other elements.

First I just tried using the predefined options and set up a change and a load for each, because I thought this was a simple enough thing I was trying to do and I read through http://www.fabrikar.com/forums/index.php?wiki/element-javascript/. These were my settings:

Event: change (also did one for load)
If this element: ==
Value: 1
Action: show
Element: fab_affirmations.ring_exchange

AND

Event: change (also did one for load)
If this element: ==
Value: 2
Action: show
Element: fab_affirmations.unity_candle


But that didn't seem to work. I set the form to the default protostar template to make sure my template wasn't interfering, and it wasn't because the issue occurred on the default template as well. So then after looking through the forums, I tried this code for a change and load for each:

var radioButton= document.getElementById('fab_affirmations___optional_services').getValue();
var element1= Fabrik.getBlock('form_93').formElements.get('fab_affirmations___ring_exchange');

if (radioButton=='1')
{
element1.show();
}
else if (radioButton=='0')
{
element1.hide();
}

AND

var radioButton= document.getElementById('fab_affirmations___optional_services').getValue();
var element1= Fabrik.getBlock('form_93').formElements.get('fab_affirmations___unity_candle');

if (radioButton=='2')
{
element1.show();
}
else if (radioButton=='0')
{
element1.hide();
}

But that didn't work either. Can someone come into my site and take a look at the form to see what I am doing wrong? Or tell from the code I have listed here? I am sure it is something simple I have done in my newbie status. The credentials are in "My Sites" area.

Any assistance is appreciated. Thank You!
Angela

 

[dimoss]

Hi

Check this post.
I had a similar problem and I solved with the code posted.
http://fabrikar.com/forums/index.php?threads/field-hide-show-with-custom-javasript.41434

 

[cheesegrits]

Using the built in hide/show effects should work, without the need for custom code.

Try using the 'click' event instead of 'change'.

-- hugh