Custom MultiState form works in preview but not on pulished site

Ask the community
, , , ,
1

Question:
I created a custom multistate form to collect information. The code and form are still pretty basic as I’m trying to get the base functionality to work. When in preview the form works as expected but when I view on the published site, the button linked to the submit function does not submit the data and load the lightbox as it does in preview.

Here’s the code on the page (note I’ve commented things out as I’ve been trying to troubleshoot options):

import wixLocation from 'wix-location';

//import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {

    const myMutliState = $w('#mySponsorBox');
    // const dropdown = $w('#dpdType');
    // const btnInterestNext = $w('#btnInterestNext');
    //  dropdown.onChange(() => {
    //      btnInterestNext.enable();
    //     })
    // Interest Page Next
    const btnInterestNext  = $w('#btnInterestNext');
    btnInterestNext.onClick(() => {
        const dropdownValue = $w('#dpdType').value;

        if( dropdownValue == "Sponsor") {
            goToState(myMutliState, $w('#Sponsorship'))//loadNext(myMutliState)
        } else if (dropdownValue == "Donate") {
           wixLocation.to("https://runsignup.com/DonationWebsite/TheStormTrailRaceSeries/Donate") //to("https://runsignup.com/DonationWebsite/TheStormTrailRaceSeries/Donate")
        } else {
            wixLocation.to("/home")
        };
    })

    $w("#btnSponsorNext").onClick(() => {
        loadNext(myMutliState);
    });


    // Back
    $w("#btnBack").onClick(() => {
        loadBack(myMutliState);
    });

    $w("#btnBack2").onClick(() => {
    loadBack(myMutliState);
    });

    // $w("#btnSaveBack").onClick(() => {
    //     loadBack(myMutliState);
    // });

});

//LoadNext
function loadNext(MultiState) {
    const states = MultiState.states;
    let current = MultiState.currentState;
    const indexCurrent = states.findIndex(state =>
        state.id == current.id
    );
    let indexNext = indexCurrent + 1;
    let next = indexNext < states.length ? states[indexNext].id : '';
    goToState(MultiState, next);
}

//loadBack
function loadBack(MultiState) {
    const states = MultiState.states;
    let current = MultiState.currentState;
    const indexCurrent = states.findIndex(state =>
        state.id == current.id
    );
    let indexBack = indexCurrent - 1;
    let back = indexBack >= 0 ? states[indexBack].id : '';
    goToState(MultiState, back);
}

// goToState
function goToState(multi, id) {
    if (id != '') {
        multi.changeState(id);
    }
}

Product:
Wix Editor and Wix Studio

2

Can you clarify? There’s no code pertaining to a submit button or a lightbox here.

3

This ended up being a security issue. When creating the multi-state box and attaching it to a form collection the permissions for public access were removed. once I correct the access on the collection the form started working as expected.