Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by Leonardo Trimarchi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='Agent Form'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <p>Agent NPN: <input data-bind='value: npn' /></p>
    <p>Lead Location: <input data-bind='value: leadLocation' />(City, State, Zip)</p>
    <p>Requested Lead Delivery Time/Date: <input data-bind='value: leadDeliveryTime' /></p>
    <p>Leads Requested: 
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="10">10</option>
        </select> </p>
    <p>Email Address: <input data-bind='value: emailAddress' /></p>
    </div>
    <div>
        <button data-bind = "click: submit" >Submit</button>
        <button data-bind = "click: reset" >Reset</button>
    </div>

JavaScript

debugger;

var viewModel = function() {
    var self = this;
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.npn = ko.observable();
    self.leadLocation = ko.observable();
    self.leadDeliveryTime = ko.observable();
    self.leadsRequested = ko.observable();
    self.emailAddress = ko.observable();
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
    self.submit = function () {     
        var Agent = {};
        Agent.FirstName = self.firstName();
        Agent.LastName = self.lastName();
        Agent.Npn = self.npn();
        Agent.LeadLocation = self.leadLocation();
        Agent.LeadDeliveryTime = self.leadDeliveryTime();
        Agent.LeadsRequested = self.leadsRequested();
        Agent.EmailAddress = self.emailAddress();
        Agent.FullName = self.fullName();
    
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: Agent,
            success: function (result) {                
                alert("Recorded inserted Sucessfully");
                self.firstName("");
                self.lastName("");
                self.npn("");
                self.leadLocation("");
                self.leadDeliveryTime("");
                self.leadsRequested("");
                self.emailAddress("");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                debugger;
                alert("some error");
            }
        });
    };
    
     self.reset = function() {
         self.firstName("");
         self.lastName("");
         self.npn("");
         self.leadLocation("");
         self.leadDeliveryTime("");
         self.leadsRequested("");
         self.emailAddress("");
        alert("Reset");
    };
};
 
ko.applyBindings(new viewModel());