Textbox visible on basis of other selection in dropdown using Javascript



Hi

If our requirement is make visible the textbox field while “other” selection on dropdown then we can achieve using so many ways .

For example using Javascript,Jquery,or autopostback event on dropdown. But javscript or jquery is the best method to do this task. It will avoid the post back on server so performance of page will be faster.

 



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptTest.aspx.cs" Inherits="JavaScriptTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>

<script type="text/javascript">

function Unvisible()
{
document.getElementById("TextBox1").style.visibility="hidden";
}

function FilterStatus()
{
var drpFilterType = document.getElementById("drpFilterType");
var selectedFilterType = drpFilterType
.options[drpFilterType.selectedIndex].value;

if (selectedFilterType == "Other")
{

document.getElementById("TextBox1").style.visibility="visible";

}

else
{
document.getElementById("TextBox1").style.visibility="hidden";
}

}
</script>

</head>
<body onload = "javascript:Unvisible();">
<form id="form1" runat="server">
<div>
<asp:dropdownlist id="drpFilterType" runat="server"
onchange="return FilterStatus()" >
<asp:ListItem Value="MonthFilter">Month</asp:ListItem>
<asp:ListItem Value="YearFilter">Year</asp:ListItem>
<asp:ListItem Value="Other">Other</asp:ListItem>
</asp:dropdownlist>

<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

Advertisement

7 thoughts on “Textbox visible on basis of other selection in dropdown using Javascript

  1. Dharmesh Barochia May 17, 2011 / 5:32 am

    instead of writing following line or code and calling on load event, why you not call FilterStatus function on dropdown load event

    function Unvisible()
    {
    document.getElementById(“TextBox1″).style.visibility=”hidden”;
    }

  2. Chandra Dev May 17, 2011 / 8:38 am

    Hi

    Thanks for your comment. Here on page load i m making textboxt visible false and while select “other” in dropdown i m calling “FilterStatus()” on onchange event.
    we can also call “filterStatus()” function on page load or onchange event.It will give same op.

  3. manoj May 2, 2013 / 2:49 pm

    I try ur answer buti can’t get it

    • Chandra Dev May 4, 2013 / 9:37 am

      Hi

      It was working code. Could you tell me what error are you getting ? There might be syntax error while doing copy paste of code.

  4. raheel June 13, 2013 / 6:11 am

    It gives error:

    Microsoft JScript runtime error: Object expected

  5. Chandra Dev June 13, 2013 / 12:43 pm

    Hi @raheel
    Plz Keep the break point in your javascript and confirm that the selected value is coming or not. This error generally come in this senario

  6. sirisha December 9, 2015 / 6:49 pm

    hi
    when using master pages we don’t have body tag .then where we need to call onload method

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.