Forums

Hi guys,

I'm relatively new to CF, and I can't seem to get my dropdown events working. I want to be able to load a form with a few fields as "parent hidden" (which i can do fine), but i want the fields to "show parent" once one of the options are made using a drop down menu. The drop down menu is on the first page of my form, and the fields I wish to show are mixed into the second and third pages.

First of all, what is the difference between "on =" and "on !=" (first option box). Second option box, as I understand, I'm supposed to specify on what option from the dropdown I wish the fields to show, referring to the values set on the general tab, right?

For the "field id, fn() or event" box, i entered the "field id" set on the target's setting box (NOT the "field name"). Is this what I should enter, or am i supposed to enter the field name instead?

All help appreciated! Thanks in advance! 🙂

[attachment=0]Capture.PNG[/attachment]

Hi bvoight,

I've just been trying to work some of these setting out for myself and am starting to get the hang of them. Please see this new FAQ for examples building double dropdowns.

what is the difference between "on =" and "on !=" (first option box). Second option box, as I understand, I'm supposed to specify on what option from the dropdown I wish the fields to show, referring to the values set on the general tab, right?

You've pretty much go that: an ='value' event is triggered if that option is selected; a !='value' event is triggered if any other option is selected.

The field id setting is the ID of the field (the value in the ID box of the element) - but I suspect that you may have entered the Label instead. IDs cannot include spaces - so if these are the IDs then they need to be corrected to e.g. brides_name.

Bob

PS Note that the 'show' and 'hide' options just hide the input box but leave the label, etc visible. You have correctly selected the Show/Hide Parent options.

You probably also need to add two more events to Hide the same elements if Wedding is not selected - otherwise they will stay visible if the user changes their mind about the wedding.

Hey Bob,

Thanks for the reply! Your info has been very helpful! 😀

Through vigorous testing, I've now determined that the issue I am having is related to the fact that my dropdown and the fields I wish to display/hide are on different pages/ in different page containers. If I test my dropdown by placing a text box in the same container as the dropdown, the show/hide features work fine.

Is there possibly a prefix I would have to add in the target field ID box to specify which container the target field is in?

How can I show/hide fields using options set by a dropdown which are in different page containers?

Thanks,

Ben

Hi Ben,

If they are on different pages then the JavaScript won't work as it only runs in the browser and has access to what is on that page.

As they are on different pages presumably they are either shown or not shown - they won't switch from one state to the other. There are various ways to do it but the simplest is probably to use some conditional CSS on the second page.

<?php
$doc = JFactory::getDocument();
$display = 'none';
if ( isset($form->data['wedding']) && $form->data['wedding'] == 'yes' ) {
  $display = 'block';
}
$style = "
 #brides_name, #grooms_name {
   display: '{$display}';
}
";
$doc->addStyleDeclaration($style);
?>

You can modify this to show/hide whole containers rather than individual elements. It needs modifying anyhow to hide the parent element of the inputs.

Bob