Hide Wizard Step based on Choice

Hello, I'm brand new (today) to Plumsail. I came across this product & think it will do what I want for my club

I've put together a basic form with a wizard with 4 steps, Name, Contact Details, Payment & Finish

On the first step (page 1, not sure what the term is) I have a choice box that asks are your contact details correct, with a "Yes" & "No" as the choices

If someone says Yes, I want the second step Contact Details to be hidden. This is the code I tried using other examples on this blog, but nothing appears to be happening for me when I change the selection.

fd.rendered(function(){
var secondStep = fd.container('Wizard1').widget.tabs[1];
function showHideWizard(){
if(fd.field('DetailsCorrect').value == 'Yes' {
fd.container('Wizard').widget.tabs.splice(1, 1);
}
else if(fd.field('DetailsCorrect').value != 'Yes' {
//add the step back
fd.container('Wizard1').widget.tabs.splice(1, 0, secondStep);
}
}
fd.field('DetailsCorrect').$on('change', showHideWizard);
showHideWizard();
});

Hello @ddjenkins,

Welcome to Plumsail Community!

The approach is correct, but there are two syntax errors:

  • there is no closing bracket after the conditional statement
  • the container name in one line is invalid.

I've updated the code, try it out:

fd.rendered(function() {
    var secondStep = fd.container('Wizard1').widget.tabs[1];

    function showHideWizard() {
        if (fd.field('DetailsCorrect').value == 'Yes') {
            fd.container('Wizard1').widget.tabs.splice(1, 1);
        } else if (fd.field('DetailsCorrect').value != 'Yes') {
            //add the step back
            fd.container('Wizard1').widget.tabs.splice(1, 0, secondStep);
        }
    }
    fd.field('DetailsCorrect').$on('change', showHideWizard);
    showHideWizard();
});

If it does not work, please check the browser console (F12) for errors and share a screenshot here.

Hi, I am trying to do something similar in SharePoint Plumsail form. I have a wizard form with 7 steps, and on step 1 if battery field equals Yes (drop down choice field) then skip to wizard step 2, if no go to next step (2). Then on wizard step 3 if the aedpads field is No skip wizard step 4.

Wizard 1 - if battery is Yes skip Wizard 2
Wizard 3 - if aedpads is No skip Wizard 4
Wizard 5 - if expired is No skip wizard 6

(all are else continue to next step)

I tried using the one from the note above and then tried this one but it is not working:

fd.sprendered(function() {
var secondStep = fd.container('Wizard1').widget.tabs[1];
function showHideWizard() {
if (fd.field('battery').value == 'Yes') {
fd.container('Wizard1').widget.tabs.splice(1, 1);
} else if (fd.field('battery').value != 'Yes') {
//add the step back
fd.container('Wizard1').widget.tabs.splice(1, 0, secondStep);
}
}
fd.field('battery').$on('change', showHideWizard);
showHideWizard();
});

Thank you for your help!!!

Hello @Cariann,

Please update the event function name to spRendered:

fd.spRendered(function() {
var secondStep = fd.container('Wizard1').widget.tabs[1];
function showHideWizard() {
if (fd.field('battery').value == 'Yes') {
fd.container('Wizard1').widget.tabs.splice(1, 1);
} else if (fd.field('battery').value != 'Yes') {
//add the step back
fd.container('Wizard1').widget.tabs.splice(1, 0, secondStep);
}
}
fd.field('battery').$on('change', showHideWizard);
showHideWizard();
});

If the code still doesn't work, please share the screenshot of all errors from the browser's console.

Thank you! I think I had a space somewhere in there too!! Thank you so much for all your very quick help!

1 Like

How do I add in the above to the overall code and is the below correct?

var fourthStep = fd.container('Wizard3').widget.tabs[3];

function showHideWizard() {
    if (fd.field('aedpads').value == 'No') {
        fd.container('Wizard3').widget.tabs.splice(3, 3);
    } else if (fd.field('aedpads').value != 'No') {
        //add the step back
        fd.container('Wizard3').widget.tabs.splice(3, 1, fourthStep);
    }
}
fd.field('aedpads').$on('change', showHideWizard);
showHideWizard();

@Cariann,

You need to place the code anywhere inside the spRendered event:

fd.spRendered(function() {
    //your other code here

	//new part of teh code
    function yourFunction() {
        alert('Hello World');
    }

    yourFunction()

    //more of your code below

});

This line of code removes 3 steps:

fd.container('Wizard3').widget.tabs.splice(3, 3);

But you need to remove only one:

fd.container('Wizard3').widget.tabs.splice(3, 1);

Please learn read about the splice() function.