title: Pass a function that returns the value of the ko.computed error during submit
body: <p>I'm having trouble submitting a form with knockout js.</p>
  
  <p>I receive the error "Pass a function that returns the value of the ko.computed."</p>
  
  <p>The code is as follows:</p>
  
  <pre><code> (function(records,$,undefined){
          records.models={
              student:function(data){
                  var self=this;
              self.id=ko.observable(data.id);
              self.fname=ko.observable(data.fname);
              self.lname=ko.observable(data.lname);
              if(data.initial==='undefined'||data.initial===null){
                  self.initial=ko.observable("");
              }else{
                  self.initial=ko.observable(data.initial);
              }
              self.fullname=ko.computed(function(){
                  return self.fname()+" "+" "+self.initial()+" "+self.lname();
              });
          },
          students_model:function(){
              var self=this;
              self.selectedStudent=ko.observable();
              self.students=ko.observableArray([]);
              getStudents();              
  
              self.save=function(){
                  var form=$("#student-form");
                  $.ajax({
                      type:"POST",
                      url:"/Student/create",
                      data:ko.toJSON(form[0]), //This line here is the exact point of failue
                      success:function(response){
                          records.general.handleSuccess(response);
                          if(response.status){
                              getStudents();
                          }       
                      }
  
                  });
                  return false;
              };
              function getStudents(){
                  $.getJSON("/Student/data",function(result){
                      var mapped=$.map(result,function(item){
                          return new records.models.student(item);});
                      self.students(mapped);
                  });
              }
          }
      };
      return records;
  }(window.records=window.records||{},jQuery));
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>@using (Ajax.BeginForm("Create", "Student",
  new AjaxOptions
  {
      HttpMethod = "Post"
  },
  new { @class = "student-form", name = "student-form", id = "student-form" }))
  { 
  &lt;input type="text" data-bind="value:$root.fname" id="student.fname" name="student.fname" /&gt;
  &lt;input type="text" data-bind="value:$root.lname" id="student.lname" name="student.lname"/&gt;
  &lt;input type="text" data-bind="value:$root.initial" id="student.initial" name="student.initial"/&gt;
  &lt;input type="text" data-bind="value:$root.dob" id="dob" name="dob" /&gt;
  &lt;button data-bind="click:save"&gt;Save&lt;/button&gt;
  }
  
  &lt;script type="text/javascript"&gt;
  ko.applyBindings(new records.models.students_model());
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong here?  I'm aware of this question here:<a href="https://stackoverflow.com/questions/12473249/pass-a-function-that-returns-the-value-of-the-ko-computed">Pass a function that returns the value of the ko.computed</a>
  But it seems like that individual had a different problem.  My code fails when starting in the save method.  Specifically the line:</p>
  
  <pre><code>data:ko.toJSON(form[0])
  </code></pre>