knockout form to django-rest-framework - django

Question

I am trying to implement a knockoutjs form to my django site. Im new to knockout so followed an example but for some reason when I submit the page refreshes with no errors but nothing gets committed to the api.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<form data-bind="submit: mySubmit">
<input data-bind="value: firstname" />
<input data-bind="value: lastname" />
<button type="submit">Go</button>
</form>
<script type="text/javascript">
var viewModel = {
mySubmit : function(formElement) {
var formData = {
'firstname' : $('#firstname').val(),
'lastname' : $('#lastname').val()
};
$.ajax({
url: "127.0.0.1:8000/api/test",
type: "POST",
data: formData,
datatype: "json",
processData:false,
contentType: "application/json; charset=utf-8",
success: function (result){
alert(result);
}
});
}
};
ko.applyBindings(viewModel);
</script>

Answer 1

you haven't declared observable's in viewModel . so consider declaring to make things go smooth .
viewModel:
var viewModel = {
firstname:ko.observable(),lastname:ko.observable(),
mySubmit : function(formElement) {
var formData = {
'firstname' : viewModel.firstname() ,
'lastname' : viewModel.lastname()
};
$.ajax({
url: '/echo/json/', //mocking ajax request
type: "POST",
data: formData,
contentType: "application/json; charset=utf-8",
success: function (result){
alert("success");
}
});
}
};
ko.applyBindings(viewModel);
Working sample here