Remove From My Forums

How to get column value when Radio is checked by using JQuery

Question

User-582711651 posted

Hi, I want to get following column values when Radio checked=true from Repeater

Column values tdCustomerCode & tdCustomerName

And values will be stored into label controls ... lbl_CustomerCode and lbl_CustomerName

This is my repeater

<asp:Panel ID="Pnl_Reptr" runat="server" ScrollBars="Auto" Height="200px">
                                <div class="box-body">
                                <div class="row" style="padding: 10px;" id="Gridpanel" runat="server">
                                    <div class="row">
                                        <div class="row table-responsive" id="pnl_Repeater" runat="server" visible="True">
                                            <asp:Repeater runat="server" ID="rptLeadGrid">
                                                <HeaderTemplate>
                                                    <table id="tblAttendance" class="table table-bordered table-striped" style="cursor: pointer; margin-bottom: 0px;">
                                                        <tr style="background: #3c8dbc; color: #fff; font-size: 16px;">
                                                            <th>Insurance Claim Transaction Details</th>
                                                        </tr>
                                                    </table>
                                                    <div class="table-responsive" style="background-color: #e2e2e2; padding-top: 5px;">
                                                        <div class="box-body">
                                                            <table id="example1" class="table table-bordered table-hover" style="cursor: pointer; background-color: #fff;">
                                                                <thead style="background-color: #3c8dbc; color: #fff; font-size: 14px; border: none;">
                                                                    <tr>
                                                                        <th id="thSN" runat="server">Sr#</th>
                                                                        <th id="thchk" runat="server">+</th>
                                                                        <th id="tdTrackingNo" runat="server">Tracking#</th>
                                                                        <th id="thDocuStatus" runat="server">Status</th>
                                                                        <th id="thRegion" runat="server">Region Name</th>
                                                                        <th id="thBranch" runat="server">Branch Name</th>
                                                                        <th id="thGroupName" runat="server">Group Name</th>
                                                                        <th id="thCustomerCode" runat="server">MemberCode</th>
                                                                        <th id="thCustomerID" runat="server">MemberID</th>
                                                                        <th id="thCustomerName" runat="server">Member Name</th>
                                                                        <th id="thLoanID" runat="server">LoanID</th>
                                                                        <th id="thDeadType" runat="server">DeadType</th>
                                                                        <th id="thDeadPerson" runat="server">Dead Person</th>
                                                                        <th id="thDeathCause" runat="server">DeathCause</th>
                                                                        <th id="thDeathDate" runat="server">DeathDate</th>
                                                                        <th id="thCourierName" runat="server">CourierName</th>
                                                                        <th id="thPODNo" runat="server">POD No</th>
                                                                        <th id="thSubmittedby" runat="server">SentBy</th>
                                                                        <th id="thMobNo" runat="server">MobNo</th>
                                                                        <th id="thDocStat" runat="server" visible="false">.</th>
                                                                        <th id="thRowID" runat="server" visible="false">.</th>
                                                                        </tr>
                                                                </thead>
                                                                <tbody>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <tr style="font-size: 12px;">
                                                       <td id="tdSN" runat="server"><%#Container.ItemIndex + 1 %></td>
                                                        <td id="tdchk" runat="server">
                                                            <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" onclick="fnCheckUnCheck(this.id); Pop_HOApprvl();"/></td>
                                                        <td id="tdTrackingNo" runat="server" style="color: #003399">
                                                            <asp:Label ID="lbl_trackno" runat="server" Text='<%#Eval("TrackingNo") %>'></asp:Label></td>
                                                        <td id="tdDocuStatus" runat="server" style="color: #CC3300"><%#Eval("DocuStatus") %></td>
                                                        <td id="tdRegionName" runat="server"><%#Eval("RegionName") %></td>
                                                        <td id="tdBranchName" runat="server"><%#Eval("BranchName") %></td>
                                                        <td id="tdGroupName" runat="server"><%#Eval("Group") %></td>
                                                        <td id="tdCustomerCode" runat="server"><%#Eval("MEMBERCODE") %></td>
                                                        <td id="tdCustomerID" runat="server"><%#Eval("MEMBERID") %></td>
                                                        <td id="tdCustomerName" runat="server"><%#Eval("MEMBERNAME") %></td>
                                                        <td id="tdLoanID" runat="server"><%#Eval("LoanID") %></td>
                                                        <td id="thDeadType" runat="server"><%#Eval("DeadType") %></td>
                                                        <td id="thDeadPerson" runat="server"><%#Eval("DeadPerson") %></td>
                                                        <td id="tdDeathCause" runat="server"><%#Eval("DeathCause") %></td>
                                                        <td id="tdDeathdate" runat="server"><%#Eval("DateofDead") %></td>
                                                        <td id="tdCourierName" runat="server"><%#Eval("CourierName") %></td>
                                                        <td id="tdPODNo" runat="server"><%#Eval("PODNo") %></td>
                                                        <td id="tdSentBy" runat="server"><%#Eval("SentBy") %></td>
                                                        <td id="tdMobNo" runat="server"><%#Eval("MobNo") %></td>
                                                        <td id="tdDocStat" runat="server">
                                                            <asp:Label ID="DStat" runat="server" Text='<%#Eval("DocStat") %>' Visible="false"></asp:Label></td>
                                                        <td id="tdRowID" runat="server">
                                                            <asp:Label ID="RowID" runat="server" Text='<%#Eval("RowID") %>' Visible="false"></asp:Label></td>
                                                        
                                                    </tr>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    </tbody></table> 
                                        </div>
                                        </div>  
                                                </FooterTemplate>
                                            </asp:Repeater>
                                        </div>
                                        <center>
                                        <asp:Label ID="Label1" runat="server" Text="" ForeColor="red"></asp:Label>
                                        <asp:Label ID="lbl_trckingid" runat="server" Text="" ></asp:Label>
                                        </center>   
                                    </div>
                                </div>
                            </div>
                            </asp:Panel>

Supporting scripts

<script type="text/javascript">
        function fnCheckUnCheck(objId) {

            var rdoArray = document.getElementsByTagName("input");
            for (i = 0; i <= rdoArray.length - 1; i++) {
                if (rdoArray[i].type == 'radio') {
                
                    if (rdoArray[i].id != objId) {
                        rdoArray[i].checked = false;
                    }
                }
            }
        }
    </script>

 <script type="text/javascript">
 function Pop_HOApprvl() {
            $(".modal-backdrop").remove();
            $("#Popu_HOApproval").modal('show');
         } 
</script>

Thanks in advance.

Sunday, October 4, 2020 3:20 PM

Answers

User-939850651 posted

Hi ayyappen.CNN,

According to your description, I tried using the code you provided. I modified some of the code to achieve your requirements. You could try the .children jQuery function.

A simple example:

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function fnCheckUnCheck(objId) {

            var rdoArray = document.getElementsByTagName("input");
            for (i = 0; i <= rdoArray.length - 1; i++) {
                if (rdoArray[i].type == 'radio') {

                    if (rdoArray[i].id != objId) {
                        rdoArray[i].checked = false;
                    } else {
                        var tdParent = $(rdoArray[i]).closest('tr');
                        var memCode = tdParent.children('td[id*="tdCustomerCode"]');
                        var memName = tdParent.children('td[id*="tdCustomerName"]');
                        $('#lbl_CustomerCode').text(memCode.text());
                        $('#lbl_CustomerName').text(memName.text());
                    }
                }
            }
        }
    </script>

<%--    <script type="text/javascript">
        function Pop_HOApprvl() {
            $(".modal-backdrop").remove();
            $("#Popu_HOApproval").modal('show');
        }
    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Pnl_Reptr" runat="server" ScrollBars="Auto" Height="200px">
                <div class="box-body">
                    <div class="row" style="padding: 10px;" id="Gridpanel" runat="server">
                        <div class="row">
                            <div class="row table-responsive" id="pnl_Repeater" runat="server" visible="True">
                                <asp:Repeater runat="server" ID="rptLeadGrid">
                                    <HeaderTemplate>
                                        <table id="tblAttendance" class="table table-bordered table-striped" style="cursor: pointer; margin-bottom: 0px;">
                                            <tr style="background: #3c8dbc; color: #fff; font-size: 16px;">
                                                <th>Insurance Claim Transaction Details</th>
                                            </tr>
                                        </table>
                                        <div class="table-responsive" style="background-color: #e2e2e2; padding-top: 5px;">
                                            <div class="box-body">
                                                <table id="example1" class="table table-bordered table-hover" style="cursor: pointer; background-color: #fff;">
                                                    <thead style="background-color: #3c8dbc; color: #fff; font-size: 14px; border: none;">
                                                        <tr>
                                                            <%--<th id="thSN" runat="server">Sr#</th>--%>
                                                            <th id="thchk" runat="server">+</th>
                                                            <th id="thCustomerCode" runat="server">MemberCode</th>
                                                            <th id="thCustomerID" runat="server">MemberID</th>
                                                            <th id="thCustomerName" runat="server">Member Name</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr style="font-size: 12px;">
                                            <%--<td id="tdSN" runat="server"><%#Container.ItemIndex + 1 %></td>--%>
                                            <td id="tdchk" runat="server">
                                                <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" onclick="fnCheckUnCheck(this.id);" />
                                            </td>
                                            <td id="tdCustomerCode" runat="server"><%#Eval("MEMBERCODE") %></td>
                                            <td id="tdCustomerID" runat="server"><%#Eval("MEMBERID") %></td>
                                            <td id="tdCustomerName" runat="server"><%#Eval("MEMBERNAME") %></td>
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </tbody></table> 
                                        </div>
                                        </div>  
                                    </FooterTemplate>
                                </asp:Repeater>
                            </div>
                            <%--<center>
                                        <asp:Label ID="Label1" runat="server" Text="" ForeColor="red"></asp:Label>
                                        <asp:Label ID="lbl_trckingid" runat="server" Text="" ></asp:Label>
                                        </center>  --%>
                        </div>
                    </div>
                </div>
            </asp:Panel>
            <asp:Label runat="server" ID="lbl_CustomerCode"></asp:Label>
            <br />
            <asp:Label runat="server" ID="lbl_CustomerName"></asp:Label>
        </div>
    </form>
</body>

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                bindReapter();
            }
        }

        private void bindReapter()
        {
            DataTable dt = new DataTable();
            string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
            using (SqlConnection conn = new SqlConnection(conStr))
            {
                string query = "select * from test_tbl";
                using (SqlCommand cmd = new SqlCommand(query, conn))
                {
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    rptLeadGrid.DataSource = dt;
                    rptLeadGrid.DataBind();
                }
            }
        }

Result:

I did not find the corresponding controls to receive data in the code you provided, I added them for testing.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, October 5, 2020 2:39 AM

All replies