asked on
use javascript to make a textbox visible on DDL selection
I'm using Visual studio 2013. I have a regulare .aspx web forms page.
So on my page i have a asp DropDownList and a ASP Textbox.
This is my code:
TestPage.aspx
This is what I want:
When the page launches I want TextBox1 to be hidden.
Then if I select any item from the Drop Down List then I want the textbox to become visible.
Where am I making a mistake in my code above?
So on my page i have a asp DropDownList and a ASP Textbox.
This is my code:
TestPage.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DDL_ASP_EnableDisableTextBox1.aspx.cs" Inherits="Wizards2.DDL_ASP_EnableDisableTextBox1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Make TextBox Visible on DDL Selection</title>
<script type="text/javascript">
// disable textbox by default
//Textbox1.disabled = true;
document.getElementById('TextBox1').style.visibility = 'hidden';
function Enable() {
document.getElementById('TextBox1').style.visibility = 'visible';
//document.getElementById("TextBox1").disabled = false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDown_Fruit" runat="server" AutoPostBack="True" onchange="Enable();">
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Banana</asp:ListItem>
<asp:ListItem>Pear</asp:ListItem>
<asp:ListItem>Watermelon</asp:ListItem>
</asp:DropDownList>
<br /><br /><br /><br />
<asp:TextBox runat="server" ID="TextBox1" />
</div>
</form>
</body>
</html>
This is what I want:
When the page launches I want TextBox1 to be hidden.
Then if I select any item from the Drop Down List then I want the textbox to become visible.
Where am I making a mistake in my code above?
JavaScriptASP.NET
Last Comment
Big Monty
ASKER
Per your suggestion I revised my code. This is my code now... Almost there.
TestPage.aspx
When I run this page now, the textbox is hidden on load which is exactly what I want.
But when I select any item from the dropdownlist the textbox is visible for like less than 1 second and it disappears.
This is a video of me running my page. You can see what I'm talking about.
http://youtu.be/Wbq1b6bBBd
Any ideas of why the textbox appears for like half a second and then disappears? It should not disappear. After I make a selection it should appear and stay there on the screen.
TestPage.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Wizards2.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Make TextBox Visible on DDL selection</title>
<script type="text/javascript">
function MakeHidden() {
// hide textbox
// asp textbox
document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'hidden';
// html textbox
//document.getElementById('TextBox1').style.visibility = 'hidden';
}
function MakeVisible() {
// make textbox visible
// asp textbox
document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'visible';
// html textbox
//document.getElementById('TextBox1').style.visibility = 'visible';
}
</script>
</head>
<!--calls this function on page load-->
<body onload="MakeHidden()">
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDown_Fruit" runat="server" AutoPostBack="True" onchange="MakeVisible()">
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Banana</asp:ListItem>
<asp:ListItem>Pear</asp:ListItem>
<asp:ListItem>Watermelon</asp:ListItem>
</asp:DropDownList>
<br /><br /><br /><br />
<asp:TextBox runat="server" ID="TextBox1" />
</div>
</form>
</body>
</html>
When I run this page now, the textbox is hidden on load which is exactly what I want.
But when I select any item from the dropdownlist the textbox is visible for like less than 1 second and it disappears.
This is a video of me running my page. You can see what I'm talking about.
http://youtu.be/Wbq1b6bBBd
Any ideas of why the textbox appears for like half a second and then disappears? It should not disappear. After I make a selection it should appear and stay there on the screen.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
what you want to do is something like:
Open in new window
you should also move the script down towards the end of the doc, right before the closing </body> tag, to make sure the DOM has fully loaded