Posting form data as Json using Knockout JS/ JQuery

Question

While I try to post the form data in Json format to the server I'm running to some error. My code is as follows.

permissionRequestModel.requestPermission = function () {
if ($("#permissionRequestForm").valid()) {
  $.ajax({
          url: "",
          type: "POST",
          data: ko.toJSON(this),
          processData:false,
          contentType: "application/json",
          dataType:"json",
          success: function (result) {
                    alert("Success");
                     },
         error: function (result) {
             alert(result.responseText);
                 }
           });
          }
    else {
        }
        };

knockout model is as follows

//Model
var permissionRequestModel = {
coNumber: ko.observable(''),
employName: ko.observable(''),
fromDate: ko.observable(''),
toDate: ko.observable(''),
checkFullDay: ko.observable(false),
fromTimeHH: ko.observable(''),
fromTimeMM: ko.observable(''),
toTimeHH: ko.observable(''),
toTimeMM: ko.observable(''),
permissionTypeOne: ko.observable(''),
permissionTypeTwo: ko.observable(''),
approverList: ko.observableArray([]),
reasonLeave: ko.observable('')
};

Read in some places that it might be because Json might be encoded before sending to server but even setting processData couldnt solve it. Please guide.

Error Message

assuming the whitespace in the url is just a typo, what does data look like after ko.toJSON? Do you have any unescaped quotation marks in your JSON? Also, echoing @nemesv, what is the error you get from the error callback? — gutsmania
– gutsmania, Commented Feb 2, 2013 at 18:30
Url whitespace was a typo, have edited the question to include the error message. Thanks. — anwith.ct
– anwith.ct, Commented Feb 3, 2013 at 5:26
@nemesv I do not have access to the server side code right now, but I have found out the error is because approverList:ko.observable([]) is passing null as its value. When a value is given there it works fine. Thanks for your time. — anwith.ct
– anwith.ct, Commented Feb 3, 2013 at 7:10
@nemesv could you help removing the above comment as it contains some sensitive names. — anwith.ct
– anwith.ct, Commented Aug 13, 2020 at 3:59

Martin · Accepted Answer · 2020-08-14 04:06:23Z

2

Change this to permissionRequestModel ... your this is not the model because you are no longer in the context of the model. You are inside a function, and the this will return the function.

permissionRequestModel.requestPermission = function () {
if ($("#permissionRequestForm").valid()) {
  $.ajax({
          url: url,
          type: "POST",
          data: ko.toJSON(permissionRequestModel),
          processData:false,
          contentType: "application/json",
          dataType:"json",
          success: function (result) {
                    alert("Success");
                     },
         error: function (result) {
             alert(result.responseText);
                 }
           });
          }
    else {
        }
        };

edited Aug 14, 2020 at 4:06

answered Feb 3, 2013 at 5:51

Martin

11.1k8 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anwith.ct Over a year ago

could you please help me remove/redact this answer as it conatins some sensitive information.

Collectives™ on Stack Overflow

Posting form data as Json using Knockout JS/ JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related