Multi page show/hide of fields based on previous page answers.....

I have the page located at http://mwforms.miworksmo.org/wiareg?chronoform=wiareg&event=page5 and there is a field #ai9 with parent #form-row-ai9, which has the "parent-hidden" attribute...

What I am trying to accomplish is having the field display if the appAgeAtApp field is less than or equal to 22.... I am following an example of something that was given to me with another post, but this is actually a text field field instead of a radio button or check box... I am thinking my JavaScript needs to be modified, but am not sure how... Please point me in the right direction... Neither of the code versions below seem to work, although the JavaScript is loaded on every page.

This was my original code

function showFreeLunch() {
    if ( jQuery('appAgeAtApp').val() <= 22)
    {
        jQuery('#form-row-ai9').show();
    } else
    {
        jQuery('#form-row-ai9').hide();
    }
}

Current Code

function showFreeLunch() {
    if ( jQuery('input[name=appAgeAtApp]:checked').val() <= 22)
    {
        jQuery('#form-row-ai9').show();
    } else
    {
        jQuery('#form-row-ai9').hide();
    }
}

Hi moorear,

There is no appAgeAtApp input on that page as far as I can see it's on page 1 (event=load).

As you already know the value before the form loads you can show/hide the element using CSS.

<?php
$display = 'none';
if ( $form->data['appAgeAtApp'] <= 22 ) {
  $display = 'block';
}
$style = "
#form-row-ai9 {
 display: '{$display}';
}
";
$jdoc = \JFactory::getDocument();
$jdoc->addStyleDeclaration($style);
?>

If you use containers you can show/.hide whole blocks of inputs in a similar way.

Bob

Do I put that into a custom code on the page under the layout, or am I supposed to add something into the setup?

Hi moorear,

I would put that in a Custom Code action in the event that is loading the HTML for that page.

Bob

Thank You Bob,

I am having issues with it however... Here is what I have done.

I have removed the function from the "Events" sub tab, and have set the #form-row-ai9 to visible and enabled...

I have then added in the custom code action into the setup for the "on page5" and put it at the beginning... before javascript and before html...

I saved all the work, tested it and it is visible whether the appAgeAtApp is 17 or 23, am I missing something or doing something wrong? the CSS code should set the field invisible from the beginning of the On page5 right?

Hi moorear,

I suggest that you add Debugger actions to your form pages so that you can see what values you have.

Do you have Multi Page actions in each page event? If not the data will not be carried forward and thus not available to the code on Page 5.

Bob

Ok, Below is my setup of the page... I have added the debuggers, and the fields in question go all the way through to the end... Next to custom code, I made comment as to what the custom code does. Still doesnt work.

On Load
Load JavaScript
Load CSS
Multi Page
[list]Reset Data = Yes[/list]
Custom Code - eligibility code
HTML (Render Form)
[list]
[*]Page = 1
[*]Submit event = page2
[/list]


On Submit
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
Debugger

On page2
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 2
[*]Submit event = page3
[/list]
Debugger

On page3
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 3
[*]Submit event = page4
[/list]
Debugger

On page4
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 4
[*]Submit event = page4
[/list]
Debugger

On page5
Load JavaScript
Load CSS
Custom Code (the PHP code you posted)
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 5
[*]Submit event = page5
[/list]
Debugger

On page6
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 6
[*]Submit event = page6
[/list]
Debugger

On page7
Load JavaScript
Load CSS
Multi Page
[list]
[*]Reset Data = No
[/list]
HTML (Render Form)
[list]
[*]Page = 7
[*]Submit event = submit
[/list]
Debugger

Good Morning Bob, I have moved it to after the multi page action, and it still does not work... Would you be acceptable to me giving you a temporary login to the site and seeing what I am doing wrong?

Hey Bob, I figured it out... Thank you for all the help with it.

Your code was adding in too many 's so it was display: 'block'; instead of display: block; once it was rendered. There was also a \ before JFactory which had to remove. I also had to add in !important so it would override the element.style{display: none;}

Your Code

<?php
$display = 'none';
if ( $form->data['appAgeAtApp'] <= 22 ) {
  $display = 'block';
}
$style = "
#form-row-ai9 {
 display: '{$display}';
}
";
$jdoc = \JFactory::getDocument();
$jdoc->addStyleDeclaration($style);
?>

My Code With Edits

<?php
$display = 'none';
if ($form->data['appAgeAtApp'] <= 22) {
  $display = 'block';
}
$style = "
#form-row-ai9 {
 display: {$display} !important;
}
";
$jdoc = JFactory::getDocument();
$jdoc->addStyleDeclaration($style);
?>

Again, thank you for all your help.

Hi moorear,

Well done, sorry about the extra quotes :-(

The \ should be harmless - there is a problem in CFv5 that Max has used a separate namespace for the GCore code which means that for some Joomla! methods you now have to identify them as being in the root namespace - which is what the \ should do - I tend to be a bit over-liberal with the \s.

Bob