swal.fire on click back and forth forward code example

Example: swal.fire on click back and forth forward

const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
    confirmButtonText: 'Forward',
    cancelButtonText: 'Back',
    progressSteps: steps,
    input: 'text',
    inputAttributes: {
        required: true
    },
    reverseButtons: true,
    validationMessage: 'This field is required'
})
async function backAndForth() {
    const values = []
    let currentStep
    for (currentStep = 0; currentStep < steps.length;) {
        if (steps[currentStep] == 1) {
            var result = await swalQueueStep.fire({
                title: 'Question .' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else if (steps[currentStep] == 2) {
            var result = await swalQueueStep.fire({
                title: 'Question ..' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else if (steps[currentStep] == 3) {
            var result = await swalQueueStep.fire({
                title: 'Question ...' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else {
            break
        }
        if (result.value) {
            values[currentStep] = result.value
            currentStep++
        } else if (result.dismiss === 'cancel') {
            currentStep--
        } else {
            break
        }

        if (currentStep === steps.length) {
            Swal.fire(JSON.stringify(values))
        }
    }
}
backAndForth();

Tags:

Misc Example