locked
Populate ASP.Net TextBox with value from DropDownList using javascript RRS feed

  • Question

  • User-1559458579 posted

    I am trying to populate a TextBox within an ASPX page (C#) with a dropdownlist value using JQuery. I tested the code and it works very well outside of an ASP.Net FormView control. It populates the textbox as advertised. But, as some of you know, you have to do something different to make it work when the DropDownList control and TextBox control are embedded inside the FormView control. The solution I need is how to use FindControl to make this work. Or, provide the syntax to make this work inside the FormView. My JavaScript is horrible at best! I gave this a try but it was wrong! Again, I am not professing to be an expert. I don't want to change the javascript that is working! I just want it to work with the FormView.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5_java.aspx.cs" Inherits="echodevelopment.WebForm5_java" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script type="text/javascript">
        function sethref() {
    
            var Textb = document.getElementById('<%=TextBox1.ClientID%>');
            var parLab = document.getElementById('<%=Dropdown1.ClientID%>').options[document.getElementById('<%=Dropdown1.ClientID%>').selectedIndex].text;
    
            if (parLab != '--select deptname--') {
                Textb.value = parLab
            }
    
            else {
    
                Textb.value = '';
    
            }
    
        }
    </script>
        <title></title>
        <style type="text/css">
            .auto-style1 {
                width: 500px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
       
            <asp:FormView ID="FormView1" runat="server" DataKeyNames="id" DataSourceID="SqlDataSource1" Width="500px">
                <EditItemTemplate>
                   
                    <table class="auto-style1">
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    <br />
                    id:
                    <asp:Label ID="idLabel1" runat="server" Text='<%# Eval("id") %>' />
                    <br />
                    City:
                    <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                    <br />
                    Citycode:
                    <asp:DropDownList ID="Dropdown1" runat="server">
                        <asp:ListItem>--select deptname--</asp:ListItem>
                        <asp:ListItem>Test1</asp:ListItem>
                        <asp:ListItem>Test2</asp:ListItem>
                        <asp:ListItem>Test3</asp:ListItem>
                    </asp:DropDownList>
                    <br />
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Citycode") %>' ClientIDMode="Static" />
                    <br />
                    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
                    &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                </EditItemTemplate>
                <InsertItemTemplate>
                    City:
                    <asp:TextBox ID="CityTextBox" runat="server" Text='<%# Bind("City") %>' />
                    <br />
                    Citycode:
                    <asp:TextBox ID="CitycodeTextBox" runat="server" Text='<%# Bind("Citycode") %>' />
                    <br />
                    <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert" />
                    &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                </InsertItemTemplate>
                <ItemTemplate>
                    id:
                    <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
                    <br />
                    City:
                    <asp:Label ID="CityLabel" runat="server" Text='<%# Bind("City") %>' />
                    <br />
                    Citycode:
                    <asp:Label ID="CitycodeLabel" runat="server" Text='<%# Bind("Citycode") %>' />
                    <br />
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    <br />
                    <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" />
                    &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" />
                    &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New" Text="New" />
                </ItemTemplate>
            </asp:FormView>
    <%--    ----------------------------------------
        -------------------------------------------%>
            
    
        </div>
            <div>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EchoConnectionString %>" DeleteCommand="DELETE FROM [Test_city] WHERE [id] = @id" InsertCommand="INSERT INTO [Test_city] ([City], [Citycode]) VALUES (@City, @Citycode)" SelectCommand="SELECT [id], [City], [Citycode] FROM [Test_city]" UpdateCommand="UPDATE [Test_city] SET [City] = @City, [Citycode] = @Citycode WHERE [id] = @id">
                    <DeleteParameters>
                        <asp:Parameter Name="id" Type="Int32" />
                    </DeleteParameters>
                    <InsertParameters>
                        <asp:Parameter Name="City" Type="String" />
                        <asp:Parameter Name="Citycode" Type="String" />
                    </InsertParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="City" Type="String" />
                        <asp:Parameter Name="Citycode" Type="String" />
                        <asp:Parameter Name="id" Type="Int32" />
                    </UpdateParameters>
                </asp:SqlDataSource>
            </div>
        </form>
    </body>
    </html>

    Saturday, October 10, 2020 2:46 PM

Answers

  • User-1559458579 posted

    I tried my hand at changing the code to this:

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

            var Textb = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("TextBox1")).ClientID%>');
            var parLab = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').options[document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').selectedIndex].text;

            if (parLab != '--select deptname--') {
                Textb.value = parLab
            }

            else {

                Textb.value = '';

            }

        }
    </script>

    But I get this error:

    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    <script type="text/javascript"> function sethref() { var Textb = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("TextBox1")).ClientID%>'); var parLab = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').options[document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').selectedIndex].text; if (parLab != '--select deptname--') { Textb.value = parLab } else { Textb.value = ''; } } </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 10, 2020 2:54 PM

All replies

  • User-1559458579 posted

    The errors:

    The name TextBox1 does not exist in the currrent context

    The name Dropdown1 does not exist in the currrent context

    Saturday, October 10, 2020 2:51 PM
  • User-1559458579 posted

    I tried my hand at changing the code to this:

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

            var Textb = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("TextBox1")).ClientID%>');
            var parLab = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').options[document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').selectedIndex].text;

            if (parLab != '--select deptname--') {
                Textb.value = parLab
            }

            else {

                Textb.value = '';

            }

        }
    </script>

    But I get this error:

    Object reference not set to an instance of an object.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    <script type="text/javascript"> function sethref() { var Textb = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("TextBox1")).ClientID%>'); var parLab = document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').options[document.getElementById('<%= (FormView1.FindControl("FormView1").FindControl("Dropdown1")).ClientID%>').selectedIndex].text; if (parLab != '--select deptname--') { Textb.value = parLab } else { Textb.value = ''; } } </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 10, 2020 2:54 PM