I'm having trouble submitting a form with knockout js.

I receive the error "Pass a function that returns the value of the koputed."

The code is as follows:

 (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=koputed(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));

HTML

@using (Ajax.BeginForm("Create", "Student",
new AjaxOptions
{
    HttpMethod = "Post"
},
new { @class = "student-form", name = "student-form", id = "student-form" }))
{ 
<input type="text" data-bind="value:$root.fname" id="student.fname" name="student.fname" />
<input type="text" data-bind="value:$root.lname" id="student.lname" name="student.lname"/>
<input type="text" data-bind="value:$root.initial" id="student.initial" name="student.initial"/>
<input type="text" data-bind="value:$root.dob" id="dob" name="dob" />
<button data-bind="click:save">Save</button>
}

<script type="text/javascript">
ko.applyBindings(new records.models.students_model());
</script>

What am I doing wrong here? I'm aware of this question here:Pass a function that returns the value of the koputed But it seems like that individual had a different problem. My code fails when starting in the save method. Specifically the line:

data:ko.toJSON(form[0])

I'm having trouble submitting a form with knockout js.

I receive the error "Pass a function that returns the value of the ko.puted."

The code is as follows:

 (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.puted(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));

HTML

@using (Ajax.BeginForm("Create", "Student",
new AjaxOptions
{
    HttpMethod = "Post"
},
new { @class = "student-form", name = "student-form", id = "student-form" }))
{ 
<input type="text" data-bind="value:$root.fname" id="student.fname" name="student.fname" />
<input type="text" data-bind="value:$root.lname" id="student.lname" name="student.lname"/>
<input type="text" data-bind="value:$root.initial" id="student.initial" name="student.initial"/>
<input type="text" data-bind="value:$root.dob" id="dob" name="dob" />
<button data-bind="click:save">Save</button>
}

<script type="text/javascript">
ko.applyBindings(new records.models.students_model());
</script>

What am I doing wrong here? I'm aware of this question here:Pass a function that returns the value of the ko.puted But it seems like that individual had a different problem. My code fails when starting in the save method. Specifically the line:

data:ko.toJSON(form[0])

• javascript
• knockout.js

• On which line do you get the error? How is your html look like? – nemesv Commented Apr 20, 2013 at 9:09
• I've updated the question. Let me know if you need more information. – user1819688 Commented Apr 20, 2013 at 18:25

1 Answer 1

ko.toJSON is expecting you to pass it your viewModel, but you're passing it an element from the DOM, thus the error.

You need to pass a javascript object (a viewmodel or part of your viewmodel) to ko.toJSON. For example, if you wanted to send up the array of students, you could do this:

ko.toJSON(self.students);

I see that your form has some inputs bound to $root.fname, $root.lname, $root.initial, and $root.dob, but I'm not sure where those exist in your viewmodel, so I can't tell you exactly what to pass. But I can give you an example of one way could could solve this.

If you have a viewmodel that looks like this:

var data = ...;
var vm = {
  newStudent : {
    fname : ko.observable(data.fname),
    lname: ko.observable(data.lname),
    initial: ko.observable(data.initial ?? ""),
    dob: ko.observable(data.dob)
  }
}

and then you bound this to your dom by calling

ko.applyBindings(vm);

You could then call ko.toJSON like this:

...
data:ko.toJSON(vm.newStudent),
...