Knockout Example - Form Steps

Multiple panels each as a step with template for buttons

by Ben Clayton

HTML

<script src="https://flowcms.infxsolutions.com/script/jQuery/jquery-2.1.1.min.js"></script>
<form id='Form1'>
    Step: <div  id='payby' data-bind="text: step"></div>
    
    <div class="step" data-bind="visible: step()==1">
        Step 1<br/>
        Cash Amount: <input name="amount" /><br/>
        Pay in Full: <input type="checkbox" name="PayInFull" /><br/>
        <div class="stepnav" data-bind="template: { name: 'button-template', data: $root }"></div>
        <div class="clearboth"></div>
    </div>
    <div class="step" data-bind="visible: step()==2">
        Step 2<br/>
        Account Name: <input name="accname" /><br/>
        Account No.: <input name="accno" /><br/>
        <div class="stepnav" data-bind="template: { name: 'button-template', data: $root }"></div>
        <div class="clearboth"></div>
    </div>
    <div class="step" data-bind="visible: step()==3">
        Step 3<br/>
        Card Number: <input name="ccnum" /><br/>
        Card Expire: <input name="ccexpire" /><br/>
        <div class="stepnav" data-bind="template: { name: 'button-template', data: $root }"></div>
        <div class="clearboth"></div>
   </div>
</form>

<script type="text/html" id="button-template">
        <button data-bind="click: prev, visible: step()>1">Prev</button>
        <button data-bind="click: next, visible: step()<steps">Next</button>
        <button data-bind="click: submit, visible: step()==steps">Submit</button>
</script>

CSS

.step {
        padding:20px;
        border:1px solid red;
}
#payby {
    display:inline-block;
    margin-bottom:30px
}
.stepnav {float:right;}
.clearboth {clear:both;}

JavaScript

function viewModel (cfg){
        this.steps=cfg.steps || 1;
        this.step=ko.observable(1);
        this.next=function(){
            this.step(this.step()+1);
        };
        this.prev=function(){
            this.step(this.step()-1);
        };
        this.submit=function(){
            var fdata = $("#Form1").serialize();
            alert("\n"+fdata);
        }
    }
    var vm = new viewModel({steps:3});
    ko.applyBindings(vm, document.getElementById("Form1"));