?
Solved

Javascript dropdownlist hide/unhide textbox

Posted on 2008-10-28
17
Medium Priority
?
1,678 Views
Last Modified: 2012-05-05
How do i control a textbox from a dropdownlist value. I need to make a text box visible when a particular vlaue is selected in the dropdownlist box. I basically want to avoid a post back to control this.

0
Comment
Question by:byte1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
17 Comments
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 22824986
(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

 
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 22825002
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>

Open in new window

0
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 22825036
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:byte1
ID: 22825125
jorge I tried your solution, but get this error

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


0
 
LVL 9

Expert Comment

by:gdupadhyay
ID: 22825314
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.

0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 22825366
Check your html source code... does the controls names are the same as the code I put?
0
 

Author Comment

by:byte1
ID: 22825542
gdupadhyay, What would be the UniqueID ? I still get the same error. i have also removed the 'lblEmp' line
0
 

Author Comment

by:byte1
ID: 22825609
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'
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 22825641
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
0
 

Author Comment

by:byte1
ID: 22825769
i checked this time, it seems to be prefixing a tax to my control names. like

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

Expert Comment

by:gdupadhyay
ID: 22825996
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.
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 22826179
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>

Open in new window

0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 22826183
The only thing that we must check is the id of your textbox in the source code of the browser
0
 

Author Comment

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

do i need to use a HTML textbox ?

0
 
LVL 15

Accepted Solution

by:
jorge_toriz earned 2000 total points
ID: 22827419
Test with this
<script language="javascript" type="text/javascript">
    function Verify()
    {
        var element = document.getElementById('_ctl14:ddlCoreProcessor');
        if (element.value == 'Value2')
            document.getElementById('_ctl14_txtCoreProcessor').style.visibility = 'hidden';
        else
            document.getElementById('_ctl14_txtCoreProcessor').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>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses
Course of the Month14 days, 2 hours left to enroll

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question