Repeater checkbox logic validation

I have an asp.net page that contains a repeater.

<asp:UpdatePanel ID="upRequests" runat="server">
        <ContentTemplate>
            <asp:Repeater ID="repRequests" runat="server">
                <HeaderTemplate>
                     <div class="ResultsList">
                        <div class="header">
                            <div class="col" style="width:275px">Module</div>
                            <div class="col" style="width:275px">Topic</div>
                            <div class="col" style="width:50px; text-align:center">Requests</div>
                            <div class="floatfix"></div>
                        </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="row">
                        <div class="col" style="width:275px"><%# Left(Eval("ModuleTitle"),30)%></div>
                        <div class="col" style="width:275px"><%# Left(Eval("TopicTitle"),30)%></div>
                        <div class="col" style="width:50px; text-align:center"><%# Eval("RecCount")%></div>
                        <%--<div class="col fright"><a href='/NE/meeting-request-detail.aspx?MID=<%#Eval("ModuleID") %>&TID=<%#Eval("TopicID") %>' title="View individual requests"><img src="../imgs/icons/view.png" /></a></div>--%>
                        <div class="col fright">
                            <asp:CheckBox ID="cbTopicID" runat="server" onclick="javascript:CheckCheck();"/>
                            <asp:HiddenField ID="hfModuleID" runat="server" Value='<%#Eval("ModuleID") %>' />
                            <asp:HiddenField ID="hfTopicID" runat="server" Value='<%#Eval("TopicID") %>' />
                        </div>
                        <div class="floatfix"></div>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div class="row alt">
                        <div class="col" style="width:275px"><%# Left(Eval("ModuleTitle"),30)%></div>
                        <div class="col" style="width:275px"><%# Left(Eval("TopicTitle"),30)%></div>
                        <div class="col" style="width:50px; text-align:center"><%# Eval("RecCount")%></div>
                        <%--<div class="col fright"><a href='/NE/meeting-request-detail.aspx?MID=<%#Eval("ModuleID") %>&TID=<%#Eval("TopicID") %>' title="View individual requests"><img src="../imgs/icons/view.png" /></a></div>--%>
                        <div class="col fright">
                            <asp:CheckBox ID="cbTopicID" runat="server" onclick="javascript:CheckCheck();"/>
                            <asp:HiddenField ID="hfModuleID" runat="server" Value='<%#Eval("ModuleID") %>' />
                            <asp:HiddenField ID="hfTopicID" runat="server" Value='<%#Eval("TopicID") %>' />
                        </div>
                        <div class="floatfix"></div>
                    </div>
                </AlternatingItemTemplate>
                <FooterTemplate>
                    </div>
                </FooterTemplate>
            </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="row">
        <div class="fright"><asp:Button ID="btnDetails" runat="server" Text="View requests" /></div>
    </div>

Open in new window



Within each row in this repeater there is a checkbox and 2 hidden fields as you can see in the code above. I validate these checkboxes via JQuery so that only 4 can be selected at any one time - this works great at the moment!

<script type="text/javascript" language="javascript">
        $("document").ready(function () {
            $(".ResultsList :checkbox").click(function () {
                if ($(".ResultsList :checkbox:checked").length >= 4) {
                    $(".ResultsList :checkbox:not(:checked)").prop("disabled", "disabled");
                } else {
                    $(".ResultsList :checkbox").prop("disabled", "");
                }
            });
        });
    </script>

Open in new window


BUT, I now need to add in some more validation so that it checks the value of my hidden field "hfModuleID" on each row and makes sure they are all the same, if not I need to alert the user and disable my submit button so that they update there checkbox selections.

Any help would be greatly appreciated as I do not know how to do this in my current situation. I think I need to use .next ...?

Thanks,
Simon
swgdesignAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

guru_samiCommented:
Is hfModuleID modified via client-side or just on server-side?
May be I am misunderstanding the statement: "...checks the value of my hidden field "hfModuleID" on each row and makes sure they are all the same..."
0
swgdesignAuthor Commented:
its not modified once its been populated in the repeater
0
swgdesignAuthor Commented:
I need to make sure that the value(1-6) of hfModuleID AFTER each of the checkboxes is the same for each checkbox that gets checked by the user. So, in the outputted code below the user should NOT be able to select the 3rd checkbox if he has checked either the 1st or 2nd checkbox because the value of hfModuleID is not the same.

<div class="row alt">
                            <input id="ctl00_cphRightContent_repRequests_ctl02_cbTopicID" type="checkbox" name="ctl00$cphRightContent$repRequests$ctl02$cbTopicID" onclick="javascript:CheckCheck();" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl02$hfModuleID" id="ctl00_cphRightContent_repRequests_ctl02_hfModuleID" value="1" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl02$hfTopicID" id="ctl00_cphRightContent_repRequests_ctl02_hfTopicID" value="2" />

                    </div>
                
                    <div class="row">
                            <input id="ctl00_cphRightContent_repRequests_ctl03_cbTopicID" type="checkbox" name="ctl00$cphRightContent$repRequests$ctl03$cbTopicID" onclick="javascript:CheckCheck();" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl03$hfModuleID" id="ctl00_cphRightContent_repRequests_ctl03_hfModuleID" value="1" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl03$hfTopicID" id="ctl00_cphRightContent_repRequests_ctl03_hfTopicID" value="3" />
                    </div>
                
                    <div class="row alt">
                            <input id="ctl00_cphRightContent_repRequests_ctl04_cbTopicID" type="checkbox" name="ctl00$cphRightContent$repRequests$ctl04$cbTopicID" onclick="javascript:CheckCheck();" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl04$hfModuleID" id="ctl00_cphRightContent_repRequests_ctl04_hfModuleID" value="2" />
                            <input type="hidden" name="ctl00$cphRightContent$repRequests$ctl04$hfTopicID" id="ctl00_cphRightContent_repRequests_ctl04_hfTopicID" value="4" />
                    </div>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

guru_samiCommented:
Try this:
What it's doing is when you check the first checbox it caputres the moduleId. Then on subsequent checks it will compare with that stored value. If you uncheck everything, it will reset firstModuleId to empty.
 $("document").ready(function () {
                var firstModuleId;
                $(".ResultsList :checkbox").click(function () {
                    var numberofcheckedboxes=$(".ResultsList :checkbox:checked").length;
                    if (numberofcheckedboxes == 1) {
                            firstModuleId = $(this).next("input:hidden").val();
                    }
                    else if (numberofcheckedboxes == 0) {
                        firstModuleId = "";
                    }

                    if ($(this).next("input:hidden").val() !== firstModuleId) {
                        alert("not valid");
                    }
                    else {
                        alert("valid");
                    }
                });
            });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
swgdesignAuthor Commented:
This sort of works, but I need to keep my clause of only alloowing 4 checkboxes to be checked. I also want to disable the submit button if the moduleid's do not match

$("document").ready(function () {
            var firstModuleId;
            var max = 4;
            var checkboxes = $('input[type="checkbox"]');
            var btn = document.getElementById('<%=btnDetails.ClientID%>');

            $(".ResultsList :checkbox").click(function () {
                var numberofcheckedboxes = $(".ResultsList :checkbox:checked").length;
                if (numberofcheckedboxes == 1) {
                    firstModuleId = $(this).next("input:hidden").val();
                }
                else if (numberofcheckedboxes == 0) {
                    firstModuleId = "";
                }

                if ($(this).next("input:hidden").val() !== firstModuleId) {
                    alert("You can only select topics from the same module. Please adjust your selection!");
                }

            });
        });

Open in new window

0
swgdesignAuthor Commented:
This is my final code:

$("document").ready(function () {
            var firstModuleId;
            $(".ResultsList :checkbox").click(function () {
                var numberofcheckedboxes = $(".ResultsList :checkbox:checked").length;

                if (numberofcheckedboxes == 1) {
                    firstModuleId = $(this).next("input:hidden").val();
                }
                else if (numberofcheckedboxes == 0) {
                    firstModuleId = "";
                }

                if ($(this).next("input:hidden").val() !== firstModuleId && numberofcheckedboxes != 0) {
                    alert("You can only select topics from the same module. Please adjust your selection to continue.");
                    $("#<%=btnDetails.ClientID%>").hide();
                } else {
                    $("#<%=btnDetails.ClientID%>").show();
                }

            });
        });

        jQuery(function () {
            var max = 4;
            var checkboxes = $('input[type="checkbox"]');

            checkboxes.change(function () {
                var current = checkboxes.filter(':checked').length;
                checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
            });
        });
0
swgdesignAuthor Commented:
Seems I spoke to soon! My code isn't quite perfect; when I have 4 checkboxes selected with the one of them being wrong and I un-check the incorrect one it doesn't show the submit button, I have to uncheck another checkbox.

Any ideas?

<script type="text/javascript" language="javascript">        
        $("document").ready(function () {
            var firstModuleId;
            $(".ResultsList :checkbox").click(function () {
                var numberofcheckedboxes = $(".ResultsList :checkbox:checked").length;

                if (numberofcheckedboxes == 1) {
                    firstModuleId = $(this).next("input:hidden").val();
                }
                else if (numberofcheckedboxes == 0) {
                    firstModuleId = "";
                }

                if ($(this).next("input:hidden").val() !== firstModuleId && numberofcheckedboxes != 0) {
                    alert("You can only select topics from the same module. Please adjust your selection to continue.");
                    $("#<%=btnDetails.ClientID%>").hide();
                } else {
                    $("#<%=btnDetails.ClientID%>").show();
                }

            });
        });

        jQuery(function () {
            var max = 4;
            var checkboxes = $('input[type="checkbox"]');

            checkboxes.change(function () {
                var current = checkboxes.filter(':checked').length;
                checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
            });
        });
    </script>

Open in new window

0
guru_samiCommented:
Actually you can just uncheck the box that had ModuleID that doesn't match i.e. the user won't be able to select the checkbox if the module Id doesn't match. First user has to uncheck the other boxes and then select that module. So you might not have to disable the button. If that works for you here is the updated if block:

 if ($(this).next("input:hidden").val() !== firstModuleId) {
                        alert("not valid");
                        $(this).prop("checked",false);
                    }
                    else {
                        alert("valid");
                    }

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.