Check if select control has value when button is clicked in Knockout.js

Question

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?

Answer 1

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.