Question

My application allows you to track orders in a store database. This database contains a weak entity used for notes which is attached to an orderID. I want to allow users to be able to apply to same ‘note’ to many orders at the same time, but there are some fields in the notes table that are dependent on the location of the sale. In other words, you should only be allowed to apply the same note if all the sale locations are the same.

Simplified View:

@using (Html.BeginForm("Create", "Note", FormMethod.Get, new { name = "editForm" }))
{
    <table id="DataTable">
        <tr>
            <th>
                <input type="button" value="Edit" onclick="checkboxValidation()"/>
            </th>
            <th>
                @Html.DisplayNameFor(model => model.OrderID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.location)
            </th>
        </tr>
@foreach (var item in Model)
{   
    <tr >
        <td>
            <input type="checkbox" name="ids" value="@item.orderID" />
        </td>
    <td>
        @Html.ActionLink(item.OrderID.ToString(), "Details", "Search", new { orderID = item.orderID.ToString() }, null)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.location)
    </td>
    </tr>
}
</table>

checkboxValidation() is a javascript function I wrote to check if at least 1 checkbox is checked. How would I add a check to make sure all of the locations on checked lines are the same? Is this even possible? Thanks

EDIT: I missed a detail. When clicking the edit button, if the check is successful, it submits the form, which brings up the notes editor.

Answer 1

Should be fairly straightforward using JQuery:

// find all the checked rows
var checkedItems = $("#DataTable").find("tr td input[type=checkbox]");

// construct a locations array for all checked items
var locations = [];
checkedItems.each(function(index, element) {
    if ($(element).is(":checked")) {
        locations.push($(this).closest("td").next("td").next("td").text().trim());
    }
});

// confirm each location is the same
var valid = true;
locations.each(function(index, element) {
    if (index > 0 && locations[index-1] != element) {
        valid = false;
        return;
    }
});

One additional thing you might want to do, is add some data tags to your tr and td elements, so that you can write more robust selectors that won’t break with a minor UI re-arrangement (like tr[data-role=check] and tr[data-role=location], etc).

---

(Using JQuery closest and and JQuery each.)