How to get text into a TextBox from a DropDownList in FormView using JavaScript in ASP.NET WebForms?

Question

I'm trying to get the selected text (not value) from a DropDownList into a TextBox. The DropDownList is located within the EditITemTemplate of my FormView control, but the TextBox is not.

Here is the js I am trying to use:

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%=fvPhaudDets.FindControl("QOpClsCallDdl")%>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].Value;
            txt.Text = selectedText;
            txt.focus();
        }
    }
</script>

Here is the OnSelectedIndexChanged event where I'm calling the js:

protected void QOpClsCallTextBox_OnSelectedIndexChanged(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "TheTxt", "GetDdlText();", true);
}

So anytime that a new value is selected in the DropDownList, the selected text should populate the TextBox, but no values are going into the TextBox. What am I missing, or what do I need to change to capture the selected value?

Answer 1

The following snippet should work. There are some issues with your javascript code. Mainly with the use of capitals and the mixing of Webforms and javascript functions.

First, to locate the DDL you need the ClientID

fvPhaudDets.FindControl("QOpClsCallDdl").ClientID

Then use the correct javascript ddl.options[ddl.selectedIndex].text , not .Value The same goes for setting the textbox text. It is txt.value = selectedText; , not txt.Text .

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%= fvPhaudDets.FindControl("QOpClsCallDdl").ClientID %>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].text;
            txt.value = selectedText;
            txt.focus();
        }
    }
</script>

UPDATE

to check if the FormView is in edit mode, use this line

var ddl = document.getElementById('<%= fvPhaudDets.CurrentMode == FormViewMode.Edit ? fvPhaudDets.FindControl("QOpClsCallDdl").ClientID : "" %>');

UPDATE 2 (complete working example)

<asp:FormView ID="fvPhaudDets" runat="server">
    <EditItemTemplate>

        <asp:DropDownList ID="QOpClsCallDdl" runat="server" onchange="GetDdlText()">
            <asp:ListItem>aaa</asp:ListItem>
            <asp:ListItem>bbb</asp:ListItem>
            <asp:ListItem>ccc</asp:ListItem>
        </asp:DropDownList>

    </EditItemTemplate>
</asp:FormView>

<input type="text" id="txtbox" />

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%= fvPhaudDets.CurrentMode == FormViewMode.Edit ? fvPhaudDets.FindControl("QOpClsCallDdl").ClientID : "" %>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].text;
            txt.value = selectedText;
            txt.focus();
        }
    }
</script>

Code behind for testing

fvPhaudDets.DataSource = new string[1];
fvPhaudDets.ChangeMode(FormViewMode.Edit);
fvPhaudDets.DataBind();

Answer 2

Try this and see if this helps. I think the problem you have is that you're not using,

ClientID

This is not the exact same code as yours. But similar.. You can change the code below accommodate your need.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHead" runat="Server">
    <script src="../scripts/jquery-1.9.1.min.js"></script>
    <script>
        function onDDLChange() {
            var selectedVal = document.getElementById('<%=ddl1.ClientID%>').value;
            var selectedTxt = document.getElementById('<%=ddl1.ClientID%>').options[selectedVal].text;
            console.log(selectedTxt);
            document.getElementById('<%=tb1.ClientID%>').value = selectedTxt;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="Server">
    <asp:DropDownList runat="server" ID="ddl1" onchange="onDDLChange();">
        <asp:ListItem Text="" Value=""></asp:ListItem>
        <asp:ListItem Text="one" Value="1"></asp:ListItem>
        <asp:ListItem Text="two" Value="2"></asp:ListItem>
    </asp:DropDownList>

    <asp:TextBox runat="server" ID="tb1"></asp:TextBox>
</asp:Content>