Stack Overflow 16737919

knockoutJS - ajax form submitting twice

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<form data-bind="submit: Save">
    <label>Name: <input type="text" data-bind="value: Name" /></label>
    <label>Message: <input type="text" data-bind="value: Message" /></label>
    <button type="submit" data-bind="enable: IsEnabled">Echo</button>
</form>

JavaScript

var ViewModel = (function () {
    function ViewModel(data) {
        this.Name = ko.observable(data.Name);
        this.Message = ko.observable(data.Message);
        
        this.IsEnabled = ko.computed(function () {
            return !!(ko.utils.unwrapObservable(this.Name) && ko.utils.unwrapObservable(this.Message));
        }, this);
    }
    ko.utils.extend(ViewModel.prototype, {
        Save: function () {
            $.ajax({
                url: '/echo/json/',
                contentType: 'application/json; charset=utf-8',
                type: "POST",
                data: {
                    json: ko.toJSON({ employee: viewModel })
                },
                success: function (result) {
                    alert(ko.toJSON(result));
                }
            });
        },
        toJSON: function () {
            return {
                Name: this.Name,
                Message: this.Message
            };
        }
    });
    return ViewModel;
})();

var model = {
    Name: 'Bob',
    Message: 'Hello World'
};
var viewModel = new ViewModel(model);
ko.applyBindings(viewModel);