Populate a TextBox from a DropDownList selection ASP.NET/Javascript

Question

I have a DDL and ASP.NET Textbox. I would like to populate the text box with the option I choose from the DDL. I need this to be instant and not use postbacks so it would seem JavaScript would be the obvious choice here. I have done quite a bit of searching but everything I have found seems to be for standard HTML (Selects and Inputs) and these do not appear to work with ASP objects:

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" />

<asp:TextBox runat="server" id="txtSalesPerson" />

My DDL is populated from SQL in the code-behind page.

Can somebody assist with the appropriate code I should use? Thanks.

Matthew · Accepted Answer · 2011-02-07 15:57:43Z

ASP.Net controls render as standard HTML elements on the browser. In script, you can get a reference to them by using the ClientID property of the ASP.Net control.

Put this in a script block in your aspx:

var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

Now you have references to the DOM objects for the select and input elements that the ASP.Net controls rendered and you can use the techniques you've already learned on the HTML elements.

Additional info You need to add an onchange attribute to your DropDownList control as such:

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />

and then put this script block in your aspx

<script type="text/javascript">

    function ddlChange()
    {
        var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
        var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

        textBox.value = ddl.options[ddl.selectedIndex].text;
    }

</script>

As you change the dropdown list, you'll see the textbox update. Tested in IE and Chrome.

boruchsiper · Accepted Answer · 2011-02-07 18:18:52Z

Since you've pointed out that you're a JavaScript beginner, may i suggest you use an updatepanel control. An updatepanel allows you to execute server code without refreshing the page. Simply place the dropdownList and the textbox in the same updatepanel or in two separate updatepanels and write the code for the textbox to update based on the dropdownlist selection. Make sure to set the dropdownlist to do autopostback. The asp markup is as follows:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server" 
        AutoPostBack="True">
        <asp:ListItem>-select-</asp:ListItem>
        <asp:ListItem>option 1</asp:ListItem>
        <asp:ListItem>option 2</asp:ListItem>
    </asp:DropDownList>
<asp:TextBox ID="txtTextBox" runat="server" />

</ContentTemplate> 
</asp:UpdatePanel>

The codebehind in vb is as follows:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If ddlList.Text <> "-select-" then
           txtTextBox.Text = ddlList.text
        End If
    End Sub

Scott · Accepted Answer · 2011-02-07 15:38:25Z

1

If you're new to JavaScript, use the jQuery library (simply provide references to the CDN-hosted jQUery files at google.com) and then you can use the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $("#DDLSalesPerson").change(function () {
        $("#txtSalesPerson").val($(this).val());
    });
</script>

edited Feb 7, 2011 at 15:38

answered Feb 7, 2011 at 15:27

Scott

14k20 gold badges99 silver badges157 bronze badges

Collectives™ on Stack Overflow

Populate a TextBox from a DropDownList selection ASP.NET/Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related