I would like to know if I can somehow detect if a select control has value when the button is clicked within foreach loop.
This is the markup I have:
<tbody data-bind="foreach: Pack">
<tr>
<th class="name"><span data-bind="text: Name"></span></th>
</tr>
<tr>
<td class="bg" colspan="3" align="left" height="112px" valign="middle">
<div class="row">
<div>
<select class="form-control" data-bind="options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 n-p m-t-30">
<!-- ko if: !Processing() -->
<a href="javascript:void();" data-bind="click: $root.AddToCart" class="additem-link">Add To Order</a>
<!-- /ko -->
</div>
</div>
</td>
</tr>
</tbody>
This is add to cart functionality:
t.AddToCart = function (n) {
if (!t.Busy()) {
t.Busy(!0);
n.Processing(!0);
$.ajax({
type: "POST",
url: "/webservices/ShopWS.asmx/AddToCart",
data: "{'packId': " + n.Id + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (i) {
if (i.d) {
n.Processing(!13);
t.Busy(!13);
}
},
error: function (n) {
u(n);
}
});
}
};
I want to check if the select control has actual value for that item in the foreach loop and if it does then it can add to the cart, otherwise it will not be possible.
How can I do that?
To get the value of the selected item, you can use the value
binding on a select
element.
<select class="form-control" data-bind="value: selectedItem, options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>
In your view model you would use
this.selectedItem = ko.observable(); // You can optionally set it to a specific TeacherId
After doing that, this.selectedItem()
will return whatever value the currently selected item has.