Calling Javascript from Content Page

Is it really easy with play with JavaScript? for instance, If you have a content page within or referencing a master page. your content page has a drop down box and a text field.

You want to show or hide the text field based on the drop down box contents.

Let's say the drop down contain a list of airports for the user to choose from. only if the user chooses the value other in this drop down, you want to show the text field.

It may not be as simple as

if (dfcDropDown.Text == "Other") dfsTextBox.Visible = True; else dfsTextBox.Visible = False;

It will be little more involved than that.

First you need to write a function in Java script. This funtion you can not just put it anywhere in the aspx. you have to put it under the asp:Content tag. which might look like this

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

Second you need to make a java script block and write your function using GetElementById. When calling getElementById, the Id of the control will be little tricker. you can not as a matter of fact put the Id of the control directly. you must use a syntax like this &lt;%=dfcDropDown.ClientID%&gt; to get the name of the control at run time. Here is a sample Javascript method that will hide the text box based on the drop down box value

<script type="text/javascript">
           function ShowHideTextBox() {

           if (document.getElementById('<%=dfcDropDownBoxt.ClientID%>').value == "Other")
               document.getElementById('<%=dfsTextBox.ClientID%>').style.display = 'none'; //hide textbox
                 else
               document.getElementById('<%=dfsTextBox.ClientID%>').style.display = 'block'; //show textbox
           }
</script>

Now, we have a code that will do what we need and we need to trigger this code when the use changes the value of the drop down box. well, we can not hook this code directly to the drop down box from within the aspx. we have to use the code behind to do that. it turns out that the onChange event is not available from within the aspx page. We must hook the onChange event using c# like this

 dfcdropDown.Attributes.Add("onChange", "ShowHideTextBox();");

and we must do this in the code behind.

Not that simple haaa;