Asp.net C# display data from gridview to TextBox using Javascript

Question

I have a simple gridview that contains userID and user_name and a select button in each row,

I created a javascript function to display user ID and User Name from gridview to asp.net Texboxe user ID and Texboxe user Name by clicking on the select button, and its working fine,

but instead of using multiple buttons on each row I want to use a single button that can do the same thing based on the value on Texboxe user ID value,

for example if I typed user ID (1) on Texboxe user ID and then clicked the single button it show display the user name on Texboxe user Name

  <asp:GridView runat="server" ID="GridView11" AutoGenerateColumns="false" Width="290px" DataSourceID="SqlDataSource11" CssClass="GridviewDiv">
                            <HeaderStyle CssClass="headerstyle" Height="40px" />
                            <Columns>
                 <asp:BoundField DataField="user_name" HeaderText="user ID"/>

                <asp:TemplateField HeaderText="user name" >
                       <ItemTemplate>
                            <asp:Label ID="Label27" Text='<%#  Eval("user_name")  %>' runat ="server" />
                       </ItemTemplate>
                       </asp:TemplateField>

                  <asp:TemplateField>
           <ItemTemplate>                                                                                                                                               
                       <asp:Button ID="ButtonSelect" runat="server" ClientIDMode="Static" width="60" Text='Select'  OnClientClick = "return GetSelectedRow(this)"  />

              </ItemTemplate>
             </asp:TemplateField>

                            </Columns>
                        </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource11" runat="server" ConnectionString="<%$ ConnectionStrings:MydbConnectionString2 %>" SelectCommand="SELECT [user_ID], [user_name] FROM users_table"></asp:SqlDataSource>





                function GetSelectedRow(UserLink) {
                    var row = UserLink.parentNode.parentNode;

                    var Userid = row.cells[0].innerHTML;
                    var UseriName= row.cells[1].getElementsByTagName("span")[0].innerHTML;

                     //document.getElementById("TextBox_user_id").value = Userid;

                     document.getElementById("TextBox_user_name").value = UseriName;

                    return false;

                }

Answer 1

You Can Use Like this...

   function GetSelectedRow(UserLink) {
                            var row = UserLink.parentNode.parentNode;
                            var i = row.rowIndex;                           
                            var grid1=document.getElementById("GridView11");
                            var Userid = grid1.row[i].cells[0].innerHTML;
                            var UseriName= grid1.rows[i].cells[1].getElementsByTagName("span")[0].innerHTML;
        
                             //document.getElementById("TextBox_user_id").value = Userid;
        
                             document.getElementById("TextBox_user_name").value = UseriName;
        
                            return false;
        
                        }