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>

Advertisements

7 Responses to “Textbox visible on basis of other selection in dropdown using Javascript”

  1. Dharmesh Barochia Says:

    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 Says:

    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 Says:

    I try ur answer buti can’t get it

    • Chandra Dev Says:

      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 Says:

    It gives error:

    Microsoft JScript runtime error: Object expected

  5. Chandra Dev Says:

    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 Says:

    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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: