Knockout Example - Form Show hide panels

Show Hide controlled by radio

by Ben Clayton

HTML

<script src="https://flowcms.infxsolutions.com/script/jQuery/jquery-2.1.1.min.js"></script>
<form id='Form1'>
    <div class="ck">Forename:</div>
    <input name="forename" value="Ben" />
    <br/>
    <div class="ck">Surname:</div>
    <input name="surname" value="Clayton" />
    <br/>
    <div class="ck">House No.:</div>
    <input name="housenum" value="12" />
    <br/>
    <br/>
    <div class="ck">Pay by:</div>
    <div class="ck">
        <input type='radio' name="payby" data-bind="checked:payby" value="-1" />None</div>
    <div class="ck">
        <input type='radio' name="payby" data-bind="checked:payby" value="0" />Cash</div>
    <div class="ck">
        <input type='radio' name="payby" data-bind="checked:payby" value="1" />Account</div>
    <div class="ck">
        <input type='radio' name="payby" data-bind="checked:payby" value="2" />Card</div>
    <br/>
    <div class="opt" data-bind="visible: payby()==0">
        <div class="ck2">Cash Amount:</div>
        <input name="amount" />
        <br/>
    </div>
    <div class="opt" data-bind="visible: payby()==1">
        <div class="ck2">Account Name:</div>
        <input name="accname" value="Fred Smith" />
        <br/>
        <div class="ck2">Account No.:</div>
        <input name="accno" value="987654321" />
        <br/>
    </div>
    <div class="opt" data-bind="visible: payby()==2">
        <div class="ck2">Card Number:</div>
        <input name="ccnum" value="1111 2222 3333 4444" />
        <br/>
        <div class="ck2">Card Expire:</div>
        <input name="ccexpire" value="11/2014" />
        <br/>
    </div>
    <button class="submit" data-bind="click: submit">Submit</button>
</form>

CSS

.opt {
    padding:20px;
    border:1px solid red;
    margin-top:20px;
}
#payby {
    margin-top:30px;
    margin-bottom:30px;
}
.ck {
    display:inline-block;
    min-width:80px;
}
.ck2 {
    display:inline-block;
    min-width:100px;
}
.submit {margin-top:20px;}
.opt input {width:160px;}

JavaScript

function viewModel() {
        this.payby = ko.observable(-1);
        this.submit = function () {
            var fdata = $("#Form1").serialize();
            alert("\n" + fdata);
        }
    };
    var vm = new viewModel();
    ko.applyBindings(vm, document.getElementById("Form1"));