Javascript On Text Changed in GridView

Question

How can I get textbox value inside my gridview with javascript ?

I want to put a value in a textbox from another textbox in the same column.

document.getElementById doesn't work..

Thanks for your help.

 <asp:GridView runat="server" ID="maGrid" AutoGenerateColumns="false" ShowFooter="true" ShowHeaderWhenEmpty="true" 
                                      OnRowEditing="maGrid_RowEditing" OnRowCancelingEdit="maGrid_RowCancelingEdit" OnRowUpdating="maGrid_RowUpdating" OnRowDeleting="maGrid_RowDeleting"
                                      DataKeyNames="ProduitId" Width="100%" HeaderStyle-HorizontalAlign="Center">
       <asp:TemplateField HeaderText="% évolution" ItemStyle-Width="5%"  ItemStyle-HorizontalAlign="Center" >
                                              <ItemTemplate>
                                                  <asp:Label Text='<%# Eval("EvoN1") %>' runat="server"></asp:Label>
                                              </ItemTemplate>
                                              <EditItemTemplate>
                                                  <asp:TextBox ID="tbEvoN1" Text='<%# Eval("EvoN1") %>' runat="server" CssClass="form-control"/>
                                              </EditItemTemplate>
                                               <FooterStyle Width="5%" /> 
                                              <FooterTemplate>                                                   
                                                  <asp:TextBox ID="txtEvoN1" runat="server" CssClass="form-control" OnTextChanged="txtEvoN1_TextChanged" AutoPostBack="True" CausesValidation="true" ValidationGroup="Insert2"/>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtEvoN1" runat="server" ValidationGroup="Insert2" ErrorMessage="Nombre !"
                                              ValidationExpression="^[0-9]+$" ControlToValidate="txtEvoN1"  CssClass="field-validation-error" />

                                              </FooterTemplate>
                                          </asp:TemplateField>

  <asp:TemplateField HeaderText="N+1" ItemStyle-Width="10%"  ItemStyle-HorizontalAlign="Center" >
                                              <ItemTemplate>
                                                  <asp:Label Text='<%# Eval("N1") %>' runat="server"></asp:Label>
                                              </ItemTemplate>
                                              <EditItemTemplate>
                                                  <asp:TextBox ID="tbN1" Text='<%# Eval("N1") %>' runat="server" CssClass="form-control"/>
                                              </EditItemTemplate>
                                              <FooterStyle Width="15%" /> 
                                              <FooterTemplate>
                                                  <asp:TextBox ID="txtN1" runat="server" CssClass="form-control" ReadOnly="true" CausesValidation="true" ValidationGroup="Insert3"/>
                                                   <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtN1" runat="server" ControlToValidate="txtN1" ValidationGroup="Insert3"
                                                 ErrorMessage="valeur"></asp:RequiredFieldValidator>
                                             </FooterTemplate>
  </Columns>
 </asp:GridView>

Please add more to your post. What do you mean by `document.getElementById` doesn't work? That is not very descriptive. Show your coding attempt and any error messages that you are getting. Also, what textbox are you trying to get the value of and place it in which other textbox? — Ryan Wilson, Mar 26 '20 at 17:09
I am trying to get the value of txtEvoN inside the gridview.. — user1578937, Mar 26 '20 at 17:23
I don't see any element with that id: `txtEvoN` in your post. — Ryan Wilson, Mar 26 '20 at 17:50

Ryan Wilson · Answer 1 · 2020-03-26T18:19:08.283

I believe you have the ID of an ASPNET control confused with the client side id attribute of an HTML element, this explains in detail what is going on and why you are not getting the element by id on the client side, reference (https://learn.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs):

All ASP.NET server controls include an ID property that uniquely identifies the control and is the means by which the control is programmatically accessed in the code-behind class. Similarly, the elements in an HTML document may include an id attribute that uniquely identifies the element; these id values are often used in client-side script to programmatically reference a particular HTML element. Given this, you may assume that when an ASP.NET server control is rendered into HTML, its ID value is used as the id value of the rendered HTML element. This is not necessarily the case because in certain circumstances a single control with a single ID value may appear multiple times in the rendered markup. Consider a GridView control that includes a TemplateField with a Label Web control with an ID value of ProductName. When the GridView is bound to its data source at runtime, this Label is repeated once for every GridView row. Each rendered Label needs a unique id value.

To handle such scenarios, ASP.NET allows certain controls to be denoted as naming containers. A naming container serves as a new ID namespace. Any server controls that appear within the naming container have their rendered id value prefixed with the ID of the naming container control. For example, the GridView and GridViewRow classes are both naming containers. Consequently, a Label control defined in a GridView TemplateField with ID ProductName is given a rendered id value of GridViewID_GridViewRowID_ProductName. Because GridViewRowID is unique for each GridView row, the resulting id values are unique.

Note

The INamingContainer interface is used to indicate that a particular ASP.NET server control should function as a naming container. The INamingContainer interface does not spell out any methods that the server control must implement; rather, it's used as a marker. In generating the rendered markup, if a control implements this interface then the ASP.NET engine automatically prefixes its ID value to its descendents' rendered id attribute values. This process is discussed in more detail in Step 2.

Naming containers not only change the rendered id attribute value, but also affect how the control may be programmatically referenced from the ASP.NET page's code-behind class. The FindControl("controlID") method is commonly used to programmatically reference a Web control. However, FindControl does not penetrate through naming containers. Consequently, you cannot directly use the Page.FindControl method to reference controls within a GridView or other naming container.

As you may have surmised, master pages and ContentPlaceHolders are both implemented as naming containers. In this tutorial we examine how master pages affect HTML element id values and ways to programmatically reference Web controls within a content page using FindControl.

SOLUTION:

Referenced Post: (How to refer to a TextBox in JavaScript inside an ASP.NET control?) and (Reference ASP.NET control by ID in JavaScript?)

score 0 · Answer 2 · answered Mar 27 '20 at 03:00

I think the easiest way to do this is to use jQuery to implement your requirements, get the value entered by txtEvoN through wildcards, and put the value into txtN1 .

<script src="https://code.jquery.com/jquery-3.4.1.js" ></script>     
<script>
            $(function () {
                $("table[id*=txtEvoN1]").on("input", function () {
                    $("table[id*=txtN1]").val($(this).val());
                })
            })

        </script>

Here is the result:

Javascript On Text Changed in GridView

2 Answers2