CODEWITHSUNDEEP
jquery-steps
Josh Sirota
Josh Sirota

Reputation: 71

JQuery-Steps: How to customize the next button for each step?

I am using JQuery Steps, which works great. But I cannot figure out how to change the text on the "Next" button such that it's different for each step. Is there a way to do that, maybe inside the onStepChanged method?

Upvotes: 1

Views: 6798

Answers (2)

Monu kanyal
Monu kanyal

Reputation: 31

this is your answer buddy:

$(function ()
{
    var settings = {
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
            labels: 
            {
               next: "Enroll",
               finish: "Pay Now",
            },
        onStepChanged: function (event, currentIndex, newIndex)
            {       
                //change color of the Go button
                //alert(currentIndex);
                if(currentIndex==1){
                $(".actions a:eq(1)").text("Checkout");
                }else{
                    $(".actions a:eq(1)").text("Enroll");
                }

            },

    };
    $("#wizard").steps(settings);
});

Upvotes: 3

Rafael Staib
Rafael Staib

Reputation: 1226

onStepChanged is the right place for changing the text of the Next button. Unfortunately there is currently no good way to do that kind of stuff. Just search for the Next button with a selector like the following and change the text wizard.find(".actions a:eq(1)").text("Next One"). In version 2.0.0 will be a better way for doing such things.

Upvotes: 1

Related Questions