Show/Hide Wizard Step Based on Dropdown Selection

Forms Public Forms
1

I am not a Javascript programmer, but am learning the best I can. I'm trying to make it so the "Children" step in the wizard will not appear if the "NumberofChildren" dropdown is set to "Zero" or the "ServicePackage" dropdown is set to "Simple". If I can get that to work, I can re-use the code for all of the conditional stuff I want to setup with other fields/steps.

I've read numerous javascript examples and documentation, but can't even get it to recognize when the value of a dropdown has changed. Can anyone point me in the right direction?

2

Dear @David_King,
Should be simple. You need to write a function, that will show/hide the step, and call this function on load and every time NumberofChildren or ServicePackage are changed, like this:

fd.rendered(function(){
 var secondStep = fd.container('Wizard').widget.tabs[1];
 function showHideWizard(){
  if(fd.field('NumberofChildren').value == 'Zero' || fd.field('ServicePackage').value == 'Simple' && fd.container('Wizard').widget.tabs.indexOf(secondStep) >= 0){
    fd.container('Wizard').widget.tabs.splice(1, 1);
  }
  else if(fd.field('NumberofChildren').value != 'Zero' && fd.field('ServicePackage').value != 'Simple' && fd.container('Wizard').widget.tabs.indexOf(secondStep) < 0){
    //add the step back
    fd.container('Wizard').widget.tabs.splice(1, 0, secondStep);
  }
 }
 fd.field('NumberofChildren').$on('change', showHideWizard);
 fd.field('ServicePackage').$on('change', showHideWizard);
 showHideWizard();
});