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?

VDWWD · Accepted Answer · 2018-10-01 21:38:46Z

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();

edited Oct 1, 2018 at 21:38

answered Oct 1, 2018 at 17:55

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1916528 Over a year ago

thank you for the feedback and the help. I'm getting a null reference exception with the code you provided, but not if I remove ".ClientID". I think the issue is in the FormView's current mode. I'm getting the exception when the page loads, so it's not checking to see if the current mode is "Edit".

VDWWD Over a year ago

You are right. I was only testing in edit mode. Updated my answer.

user1916528 Over a year ago

I updated the code to match yours, but it isn't getting a value from the dropdown list. I'm getting an error in the console indicating that the value from the dropdownlist is null. I've tried calling the function from a button as well as as from onchange of the DropDownList but I get the same error. Let me know if you have any other ideas and I'll keep trying as well.

psj01 · Accepted Answer · 2018-10-01 17:58:18Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related