We have a multiple page form like below , each page on the form is associated with different model classes. I am trying use the value the users selected in Page 1 and based upon that value selected in Pg1 I need to show/hide the field in Page2. Below is what I am trying
<div id="Page_1" style="display: none;">
<div class="form-group required">
<label for="Solution" class="control-label">Solution</label>
<select id="Solution" name="Solution" class="form-control" data-bind="options: solutions, value: solution, optionsCaption: 'Select'"></select>
</div>
...................
<button type="submit" id="NtPg" class="SubmitButton" data-bind="click: next">Next</button>
</div>
<div id="Page_2" style="display: none;">
<button type="submit" id="AddCourseInfo" class="SubmitButton" data-bind="click: addCourse">Add Course Info</button>
<div data-bind="foreach:CourseDetails" >
<div class="form-group required" data-bind="visible: solution() == 'Other'">
<label for="OtherSolution" class="control-label">Explain Other Solution : </label>
<input type="text" maxlength="1000" id="OtherSolution" name="OtherSolution" class="form-control" data-bind="value : otherSolution" required/>
</div>
</div>
...........................
Page2 has a button which allows the users add courses, when they click on the button few fields shows up in the page in foreach
loop and one of the field should show/hide based on the selection made on the previous page. But the above logic throws error like Uncaught ReferenceError: Unable to process binding "visible:"
below is the viewmodel
self.Solution= ko.observable().extend({ required: { params: true, message: "Required" } });
self.CourseDetails= ko.observableArray();
self.addCourse= function () {
self.CourseDetails.push(new coursesList());
}
function coursesList() {
var self = this;
self.otherSolution= ko.observable().extend({ required: { params: true, message: "Required" } });
........
}
How can I have the binding work properly here and get rid of the error