Wizard Control: How do I hide the wizard control after submission

Forms Public Forms
1

Hello,

I would like to hide the wizard control after the form is submitted as I would like to prevent the user from submitting multiple times.

Could you please let me know the JavaScript that I could use to accomplish this?

2

I was able to do this with the command.

$(fd.container('Wizard0').$el).hide();

But now, how do I hide the "Submit" button?

3

Hello @adasilva,

You can assign a CSS to the Submit button, e.g. button-to-hide, and use this code:

$('.button-to-hide').hide();

image

4

Is it possible to add a class to the Submit button in a wizard? I dont seem to get to the properties from that button.

5

Hello @Pablo_Medina,

You can't add a CSS class to the Finish button in the wizard, only to the whole container.

But you can detect if this is the last step of the wizard and show/hide the button or change its styling using jQuery:

fd.container("Wizard1").widget.$on("update:startIndex", function() {
    var lastStepIndex = fd.container("Wizard1").widget.tabs.length - 1;
    window.setTimeout(function() {
        var currentTabIndex = fd.container("Wizard1").widget.activeTabIndex;
        var finishButton = $('button.fd-button.btn.btn-primary')[1];
        //check that this is the next step
        if(currentTabIndex == lastStepIndex) {
            //hide finish button
            $(finishButton).hide();
        }
        else{
            //show next button
            $(finishButton).show();
        }
    }
    , 100)
})
1 Like