CODEWITHSUNDEEP
jsonknockout.js
anwith.ct
anwith.ct

Reputation: 663

Selected value in Select statement using 'options' in knockout js

I'm trying to submit a form using Knockout JS as, that data is passed as json. Here I'm having a problem. The following is my KO model.

var permissionRequestModel = {

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('')

};

Now in this approverList is being populated by an Array taken from a retrieved json object, its populted as follows

$(function () {
$.getJSON("http://ec20032432.compute-1.amazonaws.com/api/Request/permission?appid=1&opertype=get_approver_list", function (data) { permissionRequestModel.approverList(data.Approvers); })
});

the retrived data.Approvers will be of the form:

"Approvers":
[{"ID":"asdasd",
 "Display_Name":"Jason asdasd"}]

I need the text of the dropdown list to be the 'Display_Name' and Value to be 'ID', so I use the following markup to do it:

 <select name="approverList" id="approverList" data-native-menu="true" class="required" data-bind="options: approverList, optionsCaption: 'Select Your Approver', optionsText: 'Display_Name', optionsValue:'ID'">
                    </select>

So far its fine, but now when I submit the form using the following code, the approverList us being passed as an object instead of the selected value (ie the ID):

permissionRequestModel.requestPermission = function () {
if ($("#permissionRequestForm").valid()) {
    $.ajax({
        url: "http://eertretetrer.compute-1.amazonaws.com/api/Request/permission?appid=1&opertype=requestor",
        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 {
}
};

Does anybody know why this is happening? How do I send the value instead (of ID)?

Upvotes: 1

Views: 1405

Answers (1)

DevelopmentIsMyPassion
DevelopmentIsMyPassion

Reputation: 3591

Please add one more observable called 

self.ApproverId = ko.observable();

Then in your html bind like 

<select name="approverList" id="approverList" data-native-menu="true" class="required" data-bind="options: approverList, optionsCaption: 'Select Your Approver', optionsText: 'Display_Name', value:ApproverId"></select>

I hope this helps

Upvotes: 1

Related Questions