how to enable or disable div on dropdown selected index change and light box

I am working on Lightbox that has dropdown on it. depending on ddl value div should be shown up pleae help
Expand|Select|Wrap|Line Numbers
  
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterSite.master" AutoEventWireup="false" CodeFile="UsrLn.aspx.vb" Inherits="UsrLn" %>

<%@ Register TagPrefix="custom" Namespace="CustomControls" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html> 

<head> 

    <%--<title>Sample Launch Modal Page</title> --%>

    <script src="ClientScripts/jquery-1.4.2.js" type="text/javascript"></script> 

    <link rel="STYLESHEET" type="text/css" href="modal.css"> 
 
<style>  

/* Z-index of #mask must lower than #boxes .window */  

#mask {  

    position:absolute;  

    z-index:9000;  

    background-color:#000;  

    display:none;

    left:0;

      top:0;

}     

#boxes .window {  

   position:absolute;  

   width:730px;  

   height:600px;  

   display:none;  

   z-index:9999;  

   padding:20px;  

}  

/* Customize your modal window here, you can add background image too */  

#boxes #dialog {  

   width:730px;   

   height:600px;  

   background-color: #fff;

 }  

#boxes #NotAMemberdialog {  

   width:730px;   

   height:600px;  

   background-color: #fff;

 } 

</style>      
 
<script>

    $(document).ready(function() {
 
        //select all the a tag with name equal to modal  

        $('a[name=modal]').click(function(e) {

            //Cancel the link behavior  

            e.preventDefault();

            //Get the A tag  

            var id = $(this).attr('href');
 
            //Get the screen height and width  

            var maskHeight = $(document).height();

            var maskWidth = $(window).width();
 
            //Set height and width to mask to fill up the whole screen  

            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
 
            //transition effect       

            $('#mask').fadeIn(1000);

            $('#mask').fadeTo("slow", 0.8);
 
            //Get the window height and width  

            var winH = $(window).height();

            var winW = $(window).width();
 
            //Set the popup window to center  

            $(id).css('top', winH / 2 - $(id).height() / 2);

            $(id).css('left', winW / 2 - $(id).width() / 2);
 
            //transition effect  

            $(id).fadeIn(2000);
 
        });
 
        //if close button is clicked  

        $('.window .close').click(function(e) {

            //Cancel the link behavior  

            e.preventDefault();

            $('#mask, .window').hide();

        });
 
        //if mask is clicked  

        $('#mask').click(function() {

            $(this).hide();

            $('.window').hide();

        });
 
    }); 
 
</script> 
 
<script>

    // Script to show and hide form elements based n selection of user type...

    $(function() {

        $('#userselector').change(function() {

            $('.users').hide();

            $('#' + $(this).val()).show();

        });

    });

</script> 
 
<script>

    $(document).ready(function() {

        $('input[type="text"]').focus(function() {

            if ($(this).val() == $(this).defaultValue) {

                $(this).val("");

            }

            if ($(this).val() != $(this).defaultValue) {

                $(this).select();

            }

        });

        $('input[type="text"]').blur(function() {

            if ($(this).val() == "") {

                $(this).val($(this)[0].defaultValue);

            }

        });

    }); 
 
</script> 
 
</head> 

<body> 
 
<!-- #dialog is the id of a DIV defined in the code below --> 

<p><a href="#dialog" name="modal">Log In for DoD ESI Sourcing Portal</a></p> 

<p><a href="#NotAMemberdialog" name="modal">Sign up for DoD ESI Sourcing Portal</a></p> 

<div id="boxes"> 

     <!-- #customize modal window here -->  
 
     <form id="signup" name="signup" method="post"> 

     <div id="dialog" class="window">  

    <!-- ############################################### -->         
 
    <a href="#" class="close"><img src="images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a> 

    <h3>Log In for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3> 
 
    <hr /> 
 
    <table border="0" cellpadding="3" cellspacing="10" width="710"> 

    <tr> 

        <td width="355" valign="top"> 

        <asp:UpdatePanel ID="upnlLogonPanel" runat="server">

        <ContentTemplate> 

        <p class="step_title"><img src="images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p> 
 
            <asp:TextBox ID="txtEmail" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>

            <asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="None" 

            ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" /> 
 
            <asp:RegularExpressionValidator ID="RegExpEmailCheck" runat="server" ControlToValidate="txtEmail" CssClass="redtxt" 

            Display="None" ValidationGroup="CheckUser"  ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
 
            <custom:AjaxValidator Enabled="false"

            id="AjaxValidator1" CssClass="redtxt"

            ControlToValidate="txtEmail"

            Text="Email already taken" ValidationGroup="CheckUser" 

            OnServerValidate="AjaxValidator1_ServerValidateEmail" 

            Runat="server" /><BR/>
 
            Password*

            <asp:TextBox ID="txtPassword" runat="server" TextMode="password" size="50" maxlength="15"/>

            <asp:Label ID="lblMessageLabel" runat="server"  />

            <br /> 

            <asp:Button id="btnLogIn" runat="server" Text="Log In" AlternateText="Log In" />

            &nbsp;&nbsp;
 
        <asp:Button id="btnNotAMember" runat="server" Text="Not A Member" AlternateText="Register to be a Member" />

        </ContentTemplate>

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="btnLogIn" EventName="Click" />

        </Triggers>

        </asp:UpdatePanel>  
 
        </td> 

        <td width="355" valign="top"> 

        <p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p> 

        <p>USER ROLES:<br /> 

        Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br /> 

        Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>    

        </td> 

    </tr> 

    </table>          

    <!-- ############################################### -->         

     </div>  
 
     <div id="NotAMemberdialog" class="window">  

        <!-- ############################################### -->         
 
        <a href="#" class="close"><img src="Images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a> 

        <h3>Sign up for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3> 
 
        <hr /> 
 
        <table border="0" cellpadding="3" cellspacing="10" width="710"> 

        <tr> 

            <td width="355" valign="top"> 

            <asp:UpdatePanel ID="upnlUserProfile" runat="server">

            <ContentTemplate>    

                <p class="step_title"><img src="Images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p> 
 
          <%-- <asp:DropDownList ID="DDLParent" runat="server" onselectedindexchanged="DDLParent_SelectedIndexChanged" Autopostback="true"> </asp:DropDownList>  

           --%>
 
            <asp:DropDownList id="ddlUserSelector" runat="server" 

                  DataSourceID="srcUserRoles" DataValueField="PortalRoleID" DataTextField="Name" 

                 Autopostback="true" name="user_type" class="dropdown" style="margin-left: 15px;">

                  <%--  <asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>

                    <asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>

                    <asp:ListItem value="Public_User">Public User</asp:ListItem>--%>

                </asp:DropDownList>

            <asp:ObjectDataSource ID="srcUserRoles" runat="server" SelectMethod="GetPortalRoles" 

                                        TypeName="ESI.BLL.RolesBAL"></asp:ObjectDataSource>   

           <%-- <asp:DropDownList id="ddlUserSelector" name="user_type" class="dropdown" runat="server" style="margin-left: 15px;">

                    <asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>

                    <asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>

                    <asp:ListItem value="Public_User">Public User</asp:ListItem>

                </asp:DropDownList>--%>
 
              <%--   <select id="userselector" name="user_type" class="dropdown" style="margin-left: 15px;">

                    <option value="0" selected="selected"> - Select - </option>

                    <option value="Contract_Officer">Contract Officer</option>

                    <option value="Public_User">Public User</option>

                </select> --%>
 
                <br /> 

                <!-- ##### --> 

                <div id="Contract_Officer" style="display:none" class="users" runat="server" > 

                    <p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p> 

                    <p>This will hold the Contract Officer Form</p> 

                </div> 

                <!-- ##### --> 

                <div id="Public_User" style="display:none" class="users" runat="server" > 

                <p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p> 

                <div id="form_block" runat = "server" style="padding: 12px; background-color: #e5eaee;"> 
 
                <asp:TextBox ID="txtOrganizationName" Text="Organization*" runat="server" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Organization*';"/>
 
                <asp:TextBox ID="txtFirstname" runat="server" Text="First Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='First Name*';"/>

                <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" Display="None" 

                      ControlToValidate="txtFirstname" ValidationGroup="CheckUser" ErrorMessage="First Name Required" CssClass="redtxt" />
 
                <asp:TextBox ID="txtLastname" runat="server" Text="Last Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Last Name*';"/>

                <asp:RequiredFieldValidator ID="rfvLastname" runat="server" Display="None" 

                ControlToValidate="txtLastname" ValidationGroup="CheckUser" ErrorMessage="Last Name" CssClass="redtxt" />  
 
                <asp:TextBox ID="txtUserTitle" runat="server" Text="Title*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Title*';"/>
 
                <asp:TextBox ID="txtCity" runat="server" Text="City*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='City*';"/>
 
                <asp:dropdownlist ID="txtState" runat="server" class="dropdown">

                    <asp:ListItem selected="True">State*</asp:ListItem>

                    <asp:ListItem  value="AL">Alabama</asp:ListItem> 

                    <asp:ListItem  value="AK">Alaska</asp:ListItem> 

                    <asp:ListItem  value="AZ">Arizona</asp:ListItem> 

                    <asp:ListItem  value="AR">Arkansas</asp:ListItem> 

                    <asp:ListItem  value="CA">California</asp:ListItem> 

                    <asp:ListItem  value="CO">Colorado</asp:ListItem> 

                    <asp:ListItem  value="CT">Connecticut</asp:ListItem> 

                    <asp:ListItem  value="DE">Delaware</asp:ListItem> 

                    <asp:ListItem  value="DC">District of Columbia</asp:ListItem> 

                    <asp:ListItem  value="FL">Florida</asp:ListItem> 

                    <asp:ListItem  value="GA">Georgia</asp:ListItem> 

                    <asp:ListItem  value="HI">Hawaii</asp:ListItem> 

                    <asp:ListItem  value="ID">Idaho</asp:ListItem> 

                    <asp:ListItem  value="IL">Illinois</asp:ListItem> 

                    <asp:ListItem  value="IN">Indiana</asp:ListItem> 

                    <asp:ListItem  value="IA">Iowa</asp:ListItem> 

                    <asp:ListItem  value="KS">Kansas</asp:ListItem> 

                    <asp:ListItem  value="KY">Kentucky</asp:ListItem> 

                    <asp:ListItem  value="LA">Louisiana</asp:ListItem> 

                    <asp:ListItem  value="ME">Maine</asp:ListItem> 

                    <asp:ListItem  value="MD">Maryland</asp:ListItem> 

                    <asp:ListItem  value="MA">Massachusetts</asp:ListItem> 

                    <asp:ListItem  value="MI">Michigan</asp:ListItem> 

                    <asp:ListItem  value="MN">Minnesota</asp:ListItem> 

                    <asp:ListItem  value="MS">Mississippi</asp:ListItem> 

                    <asp:ListItem  value="MO">Missouri</asp:ListItem> 

                    <asp:ListItem  value="MT">Montana</asp:ListItem> 

                    <asp:ListItem  value="NE">Nebraska</asp:ListItem> 

                    <asp:ListItem  value="NV">Nevada</asp:ListItem> 

                    <asp:ListItem  value="NH">New Hampshire</asp:ListItem> 

                    <asp:ListItem  value="NJ">New Jersey</asp:ListItem> 

                    <asp:ListItem  value="NM">New Mexico</asp:ListItem> 

                    <asp:ListItem  value="NY">New York</asp:ListItem> 

                    <asp:ListItem  value="NC">North Carolina</asp:ListItem> 

                    <asp:ListItem  value="ND">North Dakota</asp:ListItem> 

                    <asp:ListItem  value="OH">Ohio</asp:ListItem> 

                    <asp:ListItem  value="OK">Oklahoma</asp:ListItem> 

                    <asp:ListItem  value="OR">Oregon</asp:ListItem> 

                    <asp:ListItem  value="PA">Pennsylvania</asp:ListItem> 

                    <asp:ListItem  value="PR">Puerto Rico</asp:ListItem> 

                    <asp:ListItem  value="RI">Rhode Island</asp:ListItem> 

                    <asp:ListItem  value="SC">South Carolina</asp:ListItem> 

                    <asp:ListItem  value="SD">South Dakota</asp:ListItem> 

                    <asp:ListItem  value="TN">Tennessee</asp:ListItem> 

                    <asp:ListItem  value="TX">Texas</asp:ListItem> 

                    <asp:ListItem  value="UT">Utah</asp:ListItem> 

                    <asp:ListItem  value="VT">Vermont</asp:ListItem> 

                    <asp:ListItem  value="VI">Virgin Islands</asp:ListItem> 

                    <asp:ListItem  value="VA">Virginia</asp:ListItem> 

                    <asp:ListItem  value="WA">Washington</asp:ListItem> 

                    <asp:ListItem  value="WV">West Virginia</asp:ListItem> 

                    <asp:ListItem  value="WI">Wisconsin</asp:ListItem> 

                    <asp:ListItem  value="WY">Wyoming</asp:ListItem> 
 
                </asp:dropdownlist>
 
                <asp:TextBox ID="txtZipCode" runat="server" Text="Zip*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Zip*';"/>
 
                <asp:TextBox ID="txtPhone" runat="server" Text="Phone*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Phone*';"/>
 
                <asp:TextBox ID="TextBox1" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>

                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" 

                    ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" /> 
 
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" CssClass="redtxt" 

                    Display="None" ValidationGroup="CheckUser"  ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
 
                    <custom:AjaxValidator Enabled="false"

                    id="AjaxValidator2" CssClass="redtxt"

                    ControlToValidate="txtEmail"

                    Text="Email already taken" ValidationGroup="CheckUser" 

                    OnServerValidate="AjaxValidator1_ServerValidateEmail" 

                    Runat="server" /><BR/>
 
                Password*

                <asp:TextBox ID="TextBox2" runat="server" TextMode="password" size="50" maxlength="15"/>

                Confirm Password*

                <asp:TextBox ID="txtReenterPassword" TextMode="password" runat="server" size="50" maxlength="15"/>

                <asp:CompareValidator id="cvPassword" ValidationGroup="CheckUser" Display="None" ControlToValidate="txtPassword" 

                ControlToCompare="txtReenterPassword" CssClass="redtxt"  EnableClientScript="false" Text="Password Validation Failed!" 

                runat="server" />
 
            </div> 

                <br /> 

                <asp:Button id="btnSubmit" runat="server" ValidationGroup="CheckUser" Text="Continue" AlternateText="Submit" />

                </div> 
 
            </ContentTemplate>

           <Triggers>

                <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />

            </Triggers>

            </asp:UpdatePanel>   
 
            </td> 

            <td width="355" valign="top"> 

                <p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p> 

                <p>USER ROLES:<br /> 

                Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br /> 

                Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>    

            </td> 

        </tr> 

        </table>          

        <!-- ############################################### -->         

     </div>     

     </form> 

     <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->    

     <div id="mask"></div>  

</div> 
 
</body> 

</html> 
 
</asp:Content>
Oct 12 '10 #1
Subscribe Post Reply
1955
how to enable or disable div on dropdown selected index change and light box

Similar topics
