Javascript dropdownlist hide/unhide textbox

(I hope you know, how to read the selected value of DDL by javascripts.)

You can use

txtbox.style.display = 'none';
or

txtbox.style.display = '';

Depened on selected value of DDL.

Please let me know if you have any question

 

A simple sample:

<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
    function Verify()
    {
        var element = document.getElementById('ddlValues');
        if (element.value == 'Value2')
            document.getElementById('txtTest').style.visibility = 'hidden';
        else
            document.getElementById('txtTest').style.visibility = 'visible';
    }
</script>
<div>
    <asp:DropDownList ID="ddlValues" runat="server" onchange="Verify();">
        <asp:ListItem Text="Value 1" Value="Value1"></asp:ListItem>
        <asp:ListItem Text="Value 2" Value="Value2"></asp:ListItem>
        <asp:ListItem Text="Value 3" Value="Value3"></asp:ListItem>
        <asp:ListItem Text="Value 4" Value="Value4"></asp:ListItem>
    </asp:DropDownList>
    <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>
</form>

Select allOpen in new window

If you don't know how to read the value, Please see below function:


function displayTextBox()
{
    var txtbox = document.getElementById('" + txtbox.UniqueID + @"');
    var ddList = document.getElementById('" + ddlist.UniqueID + @"').value;
     if(ddList == 'E')
     {
         lblEmp.style.display = '';
         txt.style.display = '';
      }
      else
      {
          txtbox.style.display = 'none';
      }
 }


Call This Function  onchange="displayOffer();" of DDL.


Good Luck.

Let me know if you have any question.

jorge I tried your solution, but get this error

0.
Message: Object required
Line: 111
Char: 9
Code: 0

That error due to, your code not able to find out the controls. Did you try my code? My code will run 100%. I have tested on my local system.

Check your html source code... does the controls names are the same as the code I put?

gdupadhyay, What would be the UniqueID ? I still get the same error. i have also removed the 'lblEmp' line

jorge, yes .i have copied my exact code.

 function VerifyCoreProcessor()
    {
        var element = document.getElementById('ddlCoreProcessor');
        if (element.value == 'Other')
            document.getElementById('txtCoreProcessor').style.visibility = 'hidden';
        else
            document.getElementById('txtCoreProcessor').style.visibility = 'visible';
    }

<asp:dropdownlist id="ddlCoreProcessor" runat="server" Width="128px" onchange="VerifyCoreProcessor();">
..........................
..........................

However I get a tag on "onchange" which is :"Could not find any attribute 'onchange' of element _
'dropdownlist'

There is no problem with that tag... is warning, the IDE do not recognize at design time that property of the control

I meant with "source code" when you run your application and see the source code inside the browser

i checked this time, it seems to be prefixing a tax to my control names. like

<TD><select name="_ctl14:ddlCoreProcessor" id="_ctl14_ddlCoreProcessor"

UniqueID is used to read the ID of server controls. My function is read the selected value of DDL and compair the selected value. If the selected value is 'E', display the controls other wise don't display.  

Can you please send me the code and .aspx file. It will help me to give you exact code.

Check with this:

<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
    function Verify()
    {
        var element = document.getElementById('_ctl14:ddlCoreProcessor');
        if (element.value == 'Value2')
            document.getElementById('_ctl14:txtTest').style.visibility = 'hidden';
        else
            document.getElementById('_ctl14:txtTest').style.visibility = 'visible';
    }
</script>
<div>
    <asp:DropDownList ID="ddlValues" runat="server" onchange="Verify();">
        <asp:ListItem Text="Value 1" Value="Value1"></asp:ListItem>
        <asp:ListItem Text="Value 2" Value="Value2"></asp:ListItem>
        <asp:ListItem Text="Value 3" Value="Value3"></asp:ListItem>
        <asp:ListItem Text="Value 4" Value="Value4"></asp:ListItem>
    </asp:DropDownList>
    <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>
</form>

Select allOpen in new window

The only thing that we must check is the id of your textbox in the source code of the browser

Text box id :
</select><input name="_ctl14:txtCoreProcessor" type="text" id="_ctl14_txtCoreProcessor" /></TD>

do i need to use a HTML textbox ?