Hide element and title with drowpodown in a form & form details view

[javier94]

I'm testing to use a dropdown.. to include or not includes dishes images in the form when user create the menu.

1.- i have created a dropdown with 2 values yes or not, predetermined in NO value "0" yes value "1"

when i load... using javascript... like this

this is ok --> when you open the form.. show this..


1.- The drowpdown predetermined in NO (OK) , the element hide (OK), BUT the title si SHOWN (should be hide also)
Not possible hide the title too?
Maybe is because is a element inside of repeteable group ??
how to do it?
I would like all element dissapears..(title and element) and description element move to the left near to the Nº

The javascript for that.. show the element on "change"...
If i set dropdown as YES .. element image appears is (OK)

2.- Doubt..

I would like.. that once we save.. if the dropdown is NO = 1.. dont see in Form details view the selector element and the image element.. .. just hide both elements... only in form details view.. if i reopen the form.. i should see the elements in case the dropdown is YES..

So for that i have to create a php code on afterprocess ??
How to say in the code this hide elements only in the form details view??


thanks in advance!

Javier

 

[juuser]

As I remember, in repeat group displayed as table you need a custom javascript to hide also the header. Something like this should work:

var my_dropdown_value = this.form.formElements.get('tablename___dropdown_element');

if(my_dropdown_value === 0) {
jQuery("th.tablename_repeat___element_name").hide();
jQuery("td.tablename_repeat___element_name").hide();
} else {
jQuery("th.tablename_repeat___element_name").show();
jQuery("td.tablename_repeat___element_name").show();
}

Add the code to your dropdown element javascript and both, to load and change events. And of course change the table and element names to match yours.

 

[javier94]

Thanks

I'm gonna try!!

 

[javier94]

before to try the code.. i try this.. and is working too.. i create 3 events in javascript,

1 event load for value dropdown 0,
1 event change for value dropdown 1
1 event change for value dropdown, 2.

as shown here

so when i load.. the dropdown and element appears.. when i change to no -> dissapear , when i change to yes --> appear

seems is working well.


the trouble is the header... i have check in the group and try all the options..




Which option should be.. if when dropdown in form is 1 = NO --> the element selected dissapear --> and dissapears also the header (title element)

I have try all the options.. but the header don´t dissapear same time the element dissapear when you change the dropdown.. ( so maybe is not the way)

OR i have to use code.. to hide everything element and title ?????
OR maybe is the Repeteable, don´t allow hide the title, i see other posts, if element is not inside a repeteable.. hide the element and title

Understanding that if the header and element dissapear --> when i save the form --> will not appear in the form details view

 

[juuser]

You seemed to have reached to a conclusion already in your first post that the built in element javascript actions do not work in this case . And in your last post you have a screenshot from the whole group visibility settings which doesn't help in showing/hiding individual elements.

Did you try something based on my sample code?

 

[javier94]

Today i'm gonna try with your code. let's see how works, and a let you know.

thanks!

 

[javier94]

I'm trying with this..
===========

--> dropdown element is: (out of repeteable group):
menu_dia_entrantes___image_dish_selector


--> Fileuoload element ( upload image, inside repeteable group):
menu_dia_entrantes_3045_repeat___es_dish_image_entrantes

the code following your instructions... (in this case i only show/hide the fileupload element.)

=============
var my_dropdown_value = this.form.formElements.get('menu_dia_entrantes___image_dish_selector');

if (my_dropdown_value === 0) {
jQuery('th.menu_dia_entrantes_3045_repeat___es_dish_image_entrantes').show();
}

else if (my_dropdown_value === 1) {
jQuery('th.menu_dia_entrantes_3045_repeat___es_dish_image_entrantes').hide();
}

else {
jQuery('th.menu_dia_entrantes_3045_repeat___es_dish_image_entrantes').show();
}

=======

if dropdown ( menu_dia_entrantes___image_dish_selector) = 0 --> show image element
if dropdown =1 --> (NO) hide image element
if dropdown =2 -- (YES) show image element

========

no error appears , seems is ok, but the element don´t do nothing, when i change the dropdown options

In javascript plugin, I created same code for LOAD event & for CHANGE event

Maybe there is something wrong in the code.. not sure.

Any suggestion?

Thanks in advance!

Javier

 

[juuser]

OK , did a quick test and this is what works for me. I forgot ".getValue();" and you need to address the repeat group class like "contains" as the repeat elements have _0, _1 etc at the end of the class. Be sure to find the right class name as mine start with fb_el_. I didn't see that in your last post. Also for some reason the dropdown value needs to be inside quotes like "0" not 0.

var my_dropdown_value = this.form.formElements.get('tablename___dropdown_element').getValue();

if(my_dropdown_value === "0") {
     jQuery('th[class*="fb_el_tablename_xxx_repeat___element_name"]').hide();
     jQuery('td[class*="fb_el_tablename_xxx_repeat___element_name"]').hide();
} else {
     jQuery('th[class*="fb_el_tablename_xxx_repeat___element_name"]').show();
     jQuery('td[class*="fb_el_tablename_xxx_repeat___element_name"]').show();
}

 

[javier94]

Your code Works!!!! BRAVISIMO!!!

OK , did a quick test and this is what works for me. I forgot ".getValue();" and you need to address the repeat group class like "contains" as the repeat elements have _0, _1 etc at the end of the class. Be sure to find the right class name as mine start with fb_el_. I didn't see that in your last post. Also for some reason the dropdown value needs to be inside quotes like "0" not 0.

var my_dropdown_value = this.form.formElements.get('tablename___dropdown_element').getValue();

if(my_dropdown_value === "0") {
     jQuery('th[class*="fb_el_tablename_xxx_repeat___element_name"]').hide();
     jQuery('td[class*="fb_el_tablename_xxx_repeat___element_name"]').hide();
} else {
     jQuery('th[class*="fb_el_tablename_xxx_repeat___element_name"]').show();
     jQuery('td[class*="fb_el_tablename_xxx_repeat___element_name"]').show();
}

My definitive Code. !!!

Added this code in javascript as LOAD event , and as CHANGE event....

=================
var my_dropdown_value = this.form.formElements.get('menu_dia_entrantes___image_dish_selector').getValue();

if(my_dropdown_value === "0") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
}

else if (my_dropdown_value === "1") {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').hide();
}

else {
jQuery('th[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
jQuery('td[class*="fb_el_menu_dia_entrantes_3045_repeat___es_dish_image_entrantes"]').show();
}


==============

now I'm gonna try to add more elements ( i have 7 more) )) )


Many thanks!!

Javier