View source code:
<div>
Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<br /><br />
<button data-bind="click: startOver">Start Over</button>
</div>
<div class="demo-section">
<form>
<label>First Name:
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" >
<input data-bind="value: firstName" class="k-input-inner" />
</span>
</label>
<label>Last Name:
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" >
<input data-bind="value: lastName" class="k-input-inner" />
</span>
</label>
<label>Gender:
<select data-bind="source: genders, value: gender"></select>
</label>
<label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
<button data-bind="enabled: agreed, click: register">Register</button>
<div data-bind="visible: confirmed">
</div>
</form>
</div>
View model source code:
var viewModel = kendo.observable({
firstName: "John",
lastName: "Doe",
genders: ["Male", "Female"],
gender: "Male",
agreed: false,
confirmed: false,
register: function(e) {
e.preventDefault();
this.set("confirmed", true);
},
startOver: function() {
this.set("confirmed", false);
this.set("agreed", false);
this.set("gender", "Male");
this.set("firstName", "John");
this.set("lastName", "Doe");
}
});
kendo.bind($("form"), viewModel);