Back

- First Name:
- Last Name:
- Gender:

I have read the licence agreement

#### Current view model state:

        {
            firstName: ,
            lastName: ,
            gender: ,
            agreed:
        }

Thank you for your registration,

#### View source code:

    <form>
        <label>First Name: <input data-bind="value: firstName" /></label>
        <label>Last Name: <input data-bind="value: lastName" /></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">
            <h4>Confirmation</h4>
            <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>
    </form>

#### 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);