Question

I’m working on a multi-step donation form which transitions between steps by using JavaScript. Sadly, when returning the value from the function, it is not updating the value. Changing step is done using this function:

function showNextStep(currentStep) {
    var chosenDonationType, checkedAllocations, selectedAllocationValue;
    $("#step" + currentStep).slideToggle("slow", function () {
        if (currentStep === 1) {
            //figure out what kind of donation they are making
            chosenDonationType = $("[name=donationType]").val();
            //show the apppropriate slide
            switch (chosenDonationType) {
            case "oneTimeGift":
                currentStep += 1;
                $("#makingAOneTimeGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
            case "recurringDonation":
                currentStep += 1;
                $("#makingARecurringGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
                //if somehow they changed it to something else, ignore them and return false.
            default:
                return false;
                //break; not needed due to return
            }//end switch
        } else if (currentStep === 3) {
            checkedAllocations = $("#step3 :checkbox:checked");
            if (checkedAllocations.length === 1) {
                selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
                $("[name=" + selectedAllocationValue + "-Allocation]").val(100);
                currentStep += 2;
            } else {
                currentStep += 1;
            }
            $("#step" + currentStep).slideToggle("slow");
        } else {
            currentStep += 1;
            $("#step" + currentStep).slideToggle("slow");
        }
    });
    return currentStep;
}

I have added return currentStep at the bottom to try to update the value of the currentStep variable that was passed in. This function is being called when the Next button is clicked using this function:

//change steps
$(".nextStep").click(function () {
    if (validateCurrentStep(currentStep)) {
        currentStep = showNextStep(currentStep);
    } else {
        return false;
    }
});

Sadly though this is not updating the variable. An online version of the page for easier testing using firebug, etc. can be found here.

Full version of the main page can be found here:
http://pastebin.com/TtTZCf06

Full version of the JavaScript being used can be found here:
http://pastebin.com/KgLJGUSA

I am using

• Twitter Bootstrap
• jQuery 1.8.2
• PHP 5

UPDATE: when moving return currentStep; to occur after the $("#step" currentStep).slideToggle("slow")'‘s that occur, it will pass to step 2, but won’t allow me to then move forward to step 3 or return to step 1.

UPDATE 2: when moving it to after the if else section, but still inside the callback, it is not updating correctly and also won’t let me go forward or backwards from #step2

**UPDATE 3: ** Removing the callback seems to work:

function showNextStep(currentStep) {
    var chosenDonationType, checkedAllocations, selectedAllocationValue, stepsMoved = 1;
    $("#step" + currentStep).slideToggle("slow")

    if (currentStep === 1) {
        //figure out what kind of donation they are making
        chosenDonationType = $("[name=donationType]").val();
            //show the apppropriate slide
            switch (chosenDonationType) {
            case "oneTimeGift":
                currentStep += 1;
                $("#makingAOneTimeGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
            case "recurringDonation":
                currentStep += 1;
                $("#makingARecurringGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
                //if somehow they changed it to something else, ignore them and return false.
            default:
                stepsMoved = 0;
                return false;
                //break; not needed due to return
            }//end switch
    } else if (currentStep === 3) {
        checkedAllocations = $("#step3 :checkbox:checked");
        if (checkedAllocations.length === 1) {
            selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
            $("[name=" + selectedAllocationValue + "-Allocation]").val(100);
            currentStep += 2;
            stepsMoved = 2;
        } else {
            currentStep += 1;
        }
        $("#step" + currentStep).slideToggle("slow");
    } else {
        currentStep += 1;
        $("#step" + currentStep).slideToggle("slow");
    }
    return stepsMoved;
}

Answer 1

Fixed:

function showNextStep(currentStep) {
    var chosenDonationType, checkedAllocations, selectedAllocationValue, stepsMoved = 1;
    $("#step" + currentStep).slideToggle("slow")

    if (currentStep === 1) {
        //figure out what kind of donation they are making
        chosenDonationType = $("[name=donationType]").val();
            //show the apppropriate slide
            switch (chosenDonationType) {
            case "oneTimeGift":
                currentStep += 1;
                $("#makingAOneTimeGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
            case "recurringDonation":
                currentStep += 1;
                $("#makingARecurringGift").show();
                $("#step" + currentStep).slideToggle("slow");
                break;
                //if somehow they changed it to something else, ignore them and return false.
            default:
                stepsMoved = 0;
                return false;
                //break; not needed due to return
            }//end switch
    } else if (currentStep === 3) {
        checkedAllocations = $("#step3 :checkbox:checked");
        if (checkedAllocations.length === 1) {
            selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
            $("[name=" + selectedAllocationValue + "-Allocation]").val(100);
            currentStep += 2;
            stepsMoved = 2;
        } else {
            currentStep += 1;
        }
        $("#step" + currentStep).slideToggle("slow");
    } else {
        currentStep += 1;
        $("#step" + currentStep).slideToggle("slow");
    }
    return stepsMoved;
}

with the trigger being:

$(".nextStep").click(function () {
    if (validateCurrentStep(currentStep)) {
        stepsMovedForward = showNextStep(currentStep);
        currentStep += stepsMovedForward;
    } else {
        return false;
    }
});