How to save a part of the form which has been filled and use the step number in header to navigate in JQM

Vikram Anand Bhushan Published at Dev

Vikram Anand Bhushan

I have a from which is basically a multistage form see the following figure

enter image description here

What I want to do is the steps which are in green at the top those steps should become like a button clicking on which I can jump to that step.

Right now I am just able to go back and forward . I am not able to jump steps

Here is a JSFIDDLE

HTML

<div class="progress1">
                <ul class="cf checkout-tabs breadcrumb" style="list-style:none"><span class="done1 talign-center stage-login">1</span>
            <li class="active1 talign-center stage-login">2</li>
            <li class="disabled talign-center stage-delivery">3</li>
            <li class="disabled talign-center stage-delivery">4</li>
            <li class="disabled talign-center  stage-payment">5</li>

        </ul>

    </div>

Thanks & Regards

Gajotres

Working example: http://jsfiddle.net/Gajotres/ZzCA2/58/

Added code:

$(".ui-content").on("click", ".checkout-tabs li",function (e) {
    var selectedTab = $(this);
    $(".checkout-tabs li").each(function(index) {
        if(index <= selectedTab.index()) {
            $(this).addClass('active1');
            if(index < selectedTab.index()) {
                $(this).addClass('done1');            
            } else {
                $(this).removeClass('done1');                  
            }
        } else if(index > selectedTab.index()) {
            $(this).removeClass('active1 done1');            
        }
    });         
    $(".step").each(function() {
        $(this).removeClass('active').addClass("ui-screen-hidden");
    }); 
    $(".step:eq(" + selectedTab.index() + ")").removeClass('ui-screen-hidden').addClass("active");
});

You should add code that will prevent jumping to not yet enabled tabs. I hope this is what you need.

Collected from the Internet

Please contact [email protected] to delete if infringement.