RESOLVED: Element -> JavaScript show/hide fields

[wuschel_lux]

Hi all,

I need your help for following scenario:

Existing is a cascading-dropdown element, that when one of the values 15 | 20 | 25 are selected, an additional element will be shown, if an other vale selected this element is hidden.
For testing with one number e.g. 15, I managed to do it, but with "OR" I am stuck.

on load : When this element "now_division" == "15", show element "m4a_pre_registration.other_division"
on load : When this element "now_division" != "15", hide element "m4a_pre_registration.other_division"

on change : When this element "now_division" == "15", show element "m4a_pre_registration.other_division"
on change : When this element "now_division" != "15", hide element "m4a_pre_registration.other_division"

Thanks for any suggestions

 

[juuser]

You can use several predefined actions or your own code in "Javascript Code" field, e.g. for hiding it would look something like:

var somevalue = this.form.formElements.get('m4a_pre_registration___now_division');

if(somevalue == '15' || somevalue == '20' || somevalue == '25') {
jQuery('.fb_el_m4a_pre_registration___other_division').addClass('fabrikHide');
}

Check the element to be hidden with browser inspect tool if needed (it's has a class control-group).

Didn't test this exact code, so you might need to adjust.

 

[wuschel_lux]

thanks juuser,

i tested with your code, but to b honest JavaScript in not my friend :-(
it didn't work, each change resulted in a hide

I added an else... but the field does not show up again

var somevalue = this.form.formElements.get('m4a_pre_registration___now_division_raw');

if(somevalue == '16' || somevalue == '19') {
  jQuery('.fb_el_m4a_pre_registration___other_division').addClass('fabrikShow');
} else {
  jQuery('.fb_el_m4a_pre_registration___other_division').addClass('fabrikHide');
}

 

[juuser]

This was just an example for hiding. I don't think there is a class fabrikShow by default. Try changing your code to:

var somevalue = this.form.formElements.get('m4a_pre_registration___now_division_raw');

if(somevalue == '16' || somevalue == '19') {
  jQuery('.fb_el_m4a_pre_registration___other_division').removeClass('fabrikHide');
} else {
  jQuery('.fb_el_m4a_pre_registration___other_division').addClass('fabrikHide');
}

In addition to change event, you might need to add similar to load event if you want the proper elements to be hidden also on form load not only on element value change.

 

[wuschel_lux]

thanks again, but the code does hide the element with any value and does not bring back the element if the value 16 or 19 is set.
And yes I will do the same code on the load event.

 

[juuser]

Add
alert(somevalue);
after the first line and see what you get with and without _raw in the element name.

 

[wuschel_lux]

after adding the alert line:

without _raw: [object Object]
with _raw: null

But I think to found my error - I now added the .getValue() and the result is the id number.
Here my final working code:

var somevalue = this.form.formElements.get('m4a_pre_registration___now_division').getValue();
/*alert(somevalue);*/
if(somevalue == '16' || somevalue == '19') {
  jQuery('.fb_el_m4a_pre_registration___other_division').removeClass('fabrikHide');
} else {
  jQuery('.fb_el_m4a_pre_registration___other_division').addClass('fabrikHide');
}

juuser thanks again for pushing me in the right direction and your precious help.

 

[juuser]

You're welcome And indeed, always checking what's inside variables is a key to quickly finding that kind of stupid mistakes like forgotten getValue etc.

And alerting the variable also gave you an answer whether you should use _raw or not in Fabrik's javascript code.