jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• Resources
• HTML
• CSS
• Result

$(function() {
    // viewModel
    var viewModel = function(first, last, nick) {

        this.name = ko.observable(last);
        this.firstName = ko.observable(first);
        this.nickName = ko.observable(nick);

        this.saveName = function() {
            $('#infoContent').hide();
            $('#dBox').show();
        };

        this.resetName = function() {
            this.name('');
            this.firstName('');
            this.nickName('');
        };

        this.backLink = function() {
            $('#dBox').hide();
            $('#infoContent').show();
        };

        //computed full name
        this.displayName = ko.computed(function() {
        return this.firstName() + "  " + this.name() + " aka " + this.nickName();
        }, this);
    };
    // bind to ko
    ko.applyBindings(new viewModel("n.a", "n.a", "n.a"));
});

<div id="infoContent">
    <fieldset>
    <legend>Info Box</legend>        
        <div class="cLabel">
            <label>First Name:</label>
        </div>
        <div class="cInput">
            <input type="text" data-bind="value: firstName" />
        </div>        
        <div class="cLabel">
            <label>Name:</label>
        </div>
        <div class="cInput">
        <input type="text" data-bind="value: name"/>
        </div>        
        <div class="cLabel">
            <label>Nick Name:</label>
        </div>
        <div class="cInput">
            <input type="text"  data-bind="value: nickName" />
        </div>        
        <div class="clear" />
        <button data-bind="click: saveName">save</button>
        <button data-bind="click: resetName">reset</button>
   </fieldset>    
   <label>your full name is: </label> <br/>
   <span data-bind="text: displayName"></span><br/>      
</div>
<div id= "dBox">
    <label>Thanks for your Information :</label>
    <span  data-bind="text: displayName"></span><br/>
    <label>and have a nice day</label><br/>
    <div id="backLink" data-bind="click: backLink">back to the form</div>
</div>

@import url(http://fonts.googleapis.com/css?family=Ruda&subset=latin,latin-ext);
body {
    font-family: 'Ruda', sans-serif;
    font-size: 16px;
}
#infoContent{
    padding: 10px 10px;
    font-size: 14px;    
}
fieldset{
    border: 2px solid #000;
    margin: 2px 2px;
    padding: 6px 6px;
    width: 98%;        
}
legend{
    padding: 6px 6px;
}
legend, div label{ 
    font-size: 14px;
    font-weight:bold;
}
input{
    border: 2px solid #000;
    width: 200px;
    padding: 4px;
}
.cLabel{
    width: 90px;    
}
.cInput {
    width: 220px;
}
.clear{
    clear:both;
}
#dBox {
    display:none;
    width: 90%;
    height: 90%;
    padding: 6px;
    margin: 6px;
}
#backLink{
    padding: 4px;
    margin:4px;
    font-size: 12px;
    color:blue;
    cursor:pointer;
}