1

I am using a multiform with jQuery steps. However it has custom steps to make based on the user's decision. Both the next and previous buttons have their own respective steps to make, and how weird it is the next button does it's job but the previous button won't allow me to set a custom step.

I upgraded the jQuery steps method to set an custom step

function _goToStep(wizard, options, state, index)
{
    return paginationClick(wizard, options, state, index);
}

$.fn.steps.setStep = function (step)
{
    var options = getOptions(this),
        state = getState(this);
    return _goToStep(this, options, state, step);
};

onChanging function to do additional steps

onStepChanging: function (event, currentIndex, newIndex) {

            let options = document.querySelectorAll('.options')

            options.forEach((option) => {
                if(option.previousElementSibling.checked) {
                    option.previousElementSibling.checked = 'checked';
                    option.previousElementSibling.classList.add('checked');
                }
            });

            if(newIndex === 0) {
                $(".actions ul").removeClass("actions-next");
            } else {
                $(".actions ul").addClass("actions-next");
            }

            //Trigger either next or prev button

            return true;

        },
// Next button is working and going to the right index

$("a[href='#next']").click(function (e) {
        const currentIndex = form.steps("getCurrentIndex");
            switch(currentIndex) {
                case 2:
                    if(document.querySelector('#latex').checked) {
                        form.steps("setStep", 2);
                    } else {
                        form.steps("setStep", 3);
                    }
                break;
                case 3:
                    form.steps("setStep", 4);
                break;
                case 4:
                    if(document.querySelector('#wandvloer').checked) {
                        form.steps("setStep", 2);
                    } else {
                        form.steps("setStep", 6);
                    }
                break;
                case 5:
                    console.log(currentIndex);
                break;
            }

        return form.valid();
    });

    //Previous button is working when being clicked, but the correct step is not being set.

    $("a[href='#previous']").click(function (e) {
        const currentIndex = form.steps("getCurrentIndex");

            switch(currentIndex) {
                case 2:
                    if(document.querySelector('#wandvloer').checked) {
                        form.steps("setStep", 3);
                    } else {
                        form.steps("setStep", 2);
                    }
                    break;
                case 3:
                    if(document.querySelector('#latex').checked) {
                        form.steps("setStep", 3);
                    } else {
                        form.steps("setStep",3);
                    }
                    break;
                case 4:
                    if(document.querySelector('#wandvloer').checked) {
                        form.steps("setStep", 5);
                    } else {
                        form.steps("setStep", 6);
                    }
                    break;
                case 5:
                    form.steps("setStep", 6);
                    break;
            }
        return form.valid();
    });

0 Answers0