Forums

I am trying to show the parent of specific fields based on the answer of a single fieldname... I know this will probably have to be something custom written, but... all the fields mentioned in the code EXCEPT famSize have the data-load-state="hidden_parent" characteristic.

You can view the actual page located at http://mwforms.miworksmo.org/wiaregform?chronoform=wiareg&event=page2

Pseudo Code Below... famSize can be any integer, but 1-4 and 5 and greater should trigger different events.

if (famSize !< '1') {
    do nothing
}
else if (famSize = '1'){
    show parent of famMem1Name && famMem1Rel && famMem1Emp;
}
else if (famSize = '2'){
    show parent of famMem1Name && famMem1Rel && famMem1Emp && famMem2Name && famMem2Rel && famMem2Emp;
}
else if (famSize = '3'){
    show parent of famMem1Name && famMem1Rel && famMem1Emp && famMem2Name && famMem2Rel && famMem2Emp && famMem3Name && famMem3Rel && famMem3Emp;
}
else if (famSize = '4'){
    show parent of famMem1Name && famMem1Rel && famMem1Emp && famMem2Name && famMem2Rel && famMem2Emp && famMem3Name && famMem3Rel && famMem3Emp && famMem4Name && famMem4Rel && famMem4Emp;
}
else (famSize =< '5'){
    show parent of famMem1Name && famMem1Rel && famMem1Emp && famMem2Name && famMem2Rel && famMem2Emp && famMem3Name && famMem3Rel && famMem3Emp && famMem4Name && famMem4Rel && famMem4Emp && famMem5Name && famMem5Rel && famMem5Emp;
}

Hi moorear,

What happens if Family Size is more than 5?

Have you thought about using a Multiplier here and let the user Click a + button to add another member?

With the current set up I think that you do need to use custom JavaScript to get this working smoothly - you can hide/show the whole multi-field row with e.g. jQ('#form-row-multi-164').show();

Bob

Good Afternoon Bob,

Presently I am using 5 functions to cause what I would like to happen...

Direct link to the page is http://mwforms.miworksmo.org/wiareg?chronoform=wiareg&event=page2

I can't seem to figure out how to hide a multi-row by default, and then show it again, and if the value changes to force it to disappear again...

The work around I have come up with is as follows:
All the individual fields are set to parent hidden, and I call the functions based on change of the famSize value... I would like to setup a cleaner approach to this though, if you could help me out.

Function Names are:
showFamMem1
showFamMem2
showFamMem3
showFamMem4
showFamMem5

On Change Value of famSize, run function showFamMem1, etc...

function showFamMem1() {
    if (jQuery('#famSize').val() >= 2){
        jQuery('#fitem-famMem1Name').show() &&
        jQuery('#fitem-famMem1Rel').show() &&
        jQuery('#fitem-famMem1Emp').show();
    }   else {
        jQuery('#fitem-famMem1Name').hide() &&
        jQuery('#fitem-famMem1Rel').hide() &&
        jQuery('#fitem-famMem1Emp').hide();
        }
}
function showFamMem2() {
    if (jQuery('#famSize').val() >= 3) {
        jQuery('#fitem-famMem2Name').show() &&
        jQuery('#fitem-famMem2Rel').show() &&
        jQuery('#fitem-famMem2Emp').show();
    } else {
        jQuery('#fitem-famMem2Name').hide() &&
        jQuery('#fitem-famMem2Rel').hide() &&
        jQuery('#fitem-famMem2Emp').hide();
    }
}
function showFamMem3() {
    if (jQuery('#famSize').val() >= 4) {
        jQuery('#fitem-famMem3Name').show() &&
        jQuery('#fitem-famMem3Rel').show() &&
        jQuery('#fitem-famMem3Emp').show();
    } else {
        jQuery('#fitem-famMem3Name').hide() &&
        jQuery('#fitem-famMem3Rel').hide() &&
        jQuery('#fitem-famMem3Emp').hide();
    }
}
function showFamMem4() {
    if (jQuery('#famSize').val() >= 5) {
        jQuery('#fitem-famMem4Name').show() &&
        jQuery('#fitem-famMem4Rel').show() &&
        jQuery('#fitem-famMem4Emp').show();
    } else {
        jQuery('#fitem-famMem4Name').hide() &&
        jQuery('#fitem-famMem4Rel').hide() &&
        jQuery('#fitem-famMem4Emp').hide();
    }
}
function showFamMem5() {
    if (jQuery('#famSize').val() >= 6) {
        jQuery('#fitem-famMem5Name').show() &&
        jQuery('#fitem-famMem5Rel').show() &&
        jQuery('#fitem-famMem5Emp').show();
    } else {
        jQuery('#fitem-famMem5Name').hide() &&
        jQuery('#fitem-famMem5Rel').hide() &&
        jQuery('#fitem-famMem5Emp').hide();
    }
}

Hi moorear,

I would probably do something like this:

jQuery(document).ready(function (jQ) {
  jQ('#famSize').on('change', showHide);
  function showHide(){
    var famSize;
    famSize = parseInt(jQ('#famSize').val());
    switch (famSize) {
      case '':
      default:
        jQ('#form-row-multi-163').hide();
        jQ('#form-row-multi-164').hide();
        jQ('#form-row-multi-165').hide();
        jQ('#form-row-multi-166').hide();
        jQ('#form-row-multi-167').hide();
        jQ('#form-row-multi-168').hide();
        break;
      case 1:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').hide();
        jQ('#form-row-multi-165').hide();
        jQ('#form-row-multi-166').hide();
        jQ('#form-row-multi-167').hide();
        jQ('#form-row-multi-168').hide();
        break;
      case 2:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').show();
        jQ('#form-row-multi-165').hide();
        jQ('#form-row-multi-166').hide();
        jQ('#form-row-multi-167').hide();
        jQ('#form-row-multi-168').hide();
        break;
      case 3:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').show();
        jQ('#form-row-multi-165').show();
        jQ('#form-row-multi-166').hide();
        jQ('#form-row-multi-167').hide();
        jQ('#form-row-multi-168').hide();
        break;
      case 4:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').show();
        jQ('#form-row-multi-165').show();
        jQ('#form-row-multi-166').show();
        jQ('#form-row-multi-167').hide();
        jQ('#form-row-multi-168').hide();
        break;
      case 5:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').show();
        jQ('#form-row-multi-165').show();
        jQ('#form-row-multi-166').show();
        jQ('#form-row-multi-167').show();
        jQ('#form-row-multi-168').hide();
        break;
      case 6:
        jQ('#form-row-multi-163').show();
        jQ('#form-row-multi-164').show();
        jQ('#form-row-multi-165').show();
        jQ('#form-row-multi-166').show();
        jQ('#form-row-multi-167').show();
        jQ('#form-row-multi-168').show();
        break;
    }
  }
});

Not tested and may need debugging. and I'm sure that it could be more elegant.

Bob