+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Hiding and display usercontrols

Hiding and display usercontrols

4 posts, 0 answered
  1. Sony
    Sony avatar
    7 posts
    Registered:
    21 Aug 2010
    21 Aug 2010
    Link to this post
    I want to develop an online application form which is having 4 different sections.so I created usercontrol for each section and each usercontrol contains Next Button(I used a Linkbutton).Each usercontrols contains lots of controls(textboxes,dropdownlist etc.).
    Now my question is , is it possible for me to put all 4 usercontrols in one masterpage containing 4 contentplaceholders? How can i hide the divs containing each contentplaceholder?
    When i tried in sitefinity, all styles and layout are changing.Hide and display of div not working as I need.

    Can u please help me to do this.

    thanks in advance
    Sony
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    22 Aug 2010
    Link to this post
    Hello Sony,

    If you hide the div the layout will be changed, because the style over the elements you use will not apply any more. You could try to hide the controls or use PlaceHolder control inside the div.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Sony
    Sony avatar
    7 posts
    Registered:
    21 Aug 2010
    30 Aug 2010
    Link to this post
    Hiding and displaying div is working perfectly now. But now my problem is, in my div4(id="outermenu4"), i have upload button for uploading image. when i click on the upload button,postback happens and my div1(id="outermenu1") is showing instead of div4 . My submit button is in div4. After uploading i need to save all values to the database. But in this case, It showing the first div. Please tell me how to solve this issue.

    Thanks & Regards
    Sony

    My .ascx code as below:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Preparator.ascx.cs"

        Inherits="UserControls_OnlineApplication" %>

    <script type="text/javascript" language="JavaScript">

    function ddlGenderClient_validate(source, args)

    {

        var strText = args.Value;

       

        if (strText=='Gender:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

    }

    function ddlDateOfBirth_validate(source,args)

    {

      var day= document.getElementById('<%=ddlDobDate.ClientID%>').value;

      var month= document.getElementById('<%=ddlDobMonth.ClientID%>').value;

      var year= document.getElementById('<%=ddlDobYear.ClientID%>').value;

      if(day=='Day' || month=='Month' || year=='Year')

      {

        args.IsValid=false;

      }

      else

      {

        args.IsValid=true;

      }

    }

    function clearText(thefield){

    if (thefield.defaultValue==thefield.value)

    thefield.value = ""

    }

    function txtCityCountry_validate(source,args)

    {

        var city= document.getElementById('<%=txtCityCountry.ClientID%>').value;

        if(city=='City & Country of')

        {

            args.IsValid=false;

        }

       else

       {

            args.IsValid=true;

       }

    }

    function ddlNationality_validate(source, args)

    {

        var strText =document.getElementById('<%=ddlNationality.ClientID%>').value;

       

        if (strText=='Nationality:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

    }

    function ddlInstrumentChoice1_validate(source, args)

    {

        var strText =document.getElementById('<%=ddlInstrumentChoice1.ClientID%>').value;

      

        if (strText=='First Choice:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

    }

    function ddlMusicalExperience_validate(source, args)

    {

        var strText = args.Value;

       

        if (strText=='Select')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

    }

    function ddlExperience_validate(source,args)

    {

      var day= document.getElementById('<%=ddlExpDate.ClientID%>').value;

      var month= document.getElementById('<%=ddlExpMonth.ClientID%>').value;

      var year= document.getElementById('<%=ddlExpYear.ClientID%>').value;

      if(day=='Day' && month=='Month' && year=='Year')

      {

        args.IsValid=false;

      }

      else

      {

        args.IsValid=true;

      }

    }

    function ddlMusicParticipation_Validate(source,args)

    {

      var strText = document.getElementById('<%=ddlMusicParticipation.ClientID%>').value;

       

        if (strText=='S')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

    }

    function ddlParticipationDate_validate(source,args)

    {

      var day= document.getElementById('<%=ddlParticipationDate.ClientID%>').value;

      var month= document.getElementById('<%=ddlParticipationMonth.ClientID%>').value;

      var year= document.getElementById('<%=ddlParticipationYear.ClientID%>').value;

      if(day=='Day' || month=='Month' || year=='Year')

      {

        args.IsValid=false;

      }

      else

      {

        args.IsValid=true;

      }

    }

    function ddlFatherNationality_validate(source,args)

    {

        var strText =document.getElementById('<%=ddlFatherNationality.ClientID%>').value;

       

        if (strText=='Nationality:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

      }

     

     function ddlMotherNationality_Validate(source,args)

     {

       var strText =document.getElementById('<%=ddlMotherNationality.ClientID%>').value;

       

        if (strText=='Nationality:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

     }

     

     function ddlTodaysDate_Validate(source,args)

     {

        var day= document.getElementById('<%=ddlTodaysDate.ClientID%>').value;

      var month= document.getElementById('<%=ddlTodaysMonth.ClientID%>').value;

      var year= document.getElementById('<%=ddlTodaysYear.ClientID%>').value;

      if(day=='Day' || month=='Month' || year=='Year')

      {

        args.IsValid=false;

      }

      else

      {

        args.IsValid=true;

      }

     }

     

     function chkCertify_validate(source,args)

     {

       var strText =document.getElementById('<%=chkCertify.ClientID%>').value;

       

        if (strText=='Nationality:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

     }

     function chkRead_validate(source,args)

     {

       var strText =document.getElementById('<%=chkRead.ClientID%>').value;

       

        if (strText=='Nationality:')

        {

            args.IsValid = false;

        }

        else

        {

            args.IsValid=true;

        }

     }

        function HideTextBox(ddlId)

        {

          ValidatorEnable(document.getElementById('<%= cvMusicParticipation.ClientID %>'), true); 

          var ControlName = document.getElementById(ddlId.id).value;

           if(ControlName=='Y')

           {

            document.getElementById('music1').style.display="";

            document.getElementById('music2').style.display="";

            document.getElementById('music3').style.display="";

            document.getElementById('music4').style.display="";

           

           }

           else

           {

            document.getElementById('music1').style.display="none";

             document.getElementById('music2').style.display="none";

            document.getElementById('music3').style.display="none";

            document.getElementById('music4').style.display="none";

           }

      

       }

    function enableStudentInfoValidators()

    {    

        for(i=0;i< Page_Validators.length;i++)

        {

           

            ValidatorEnable(Page_Validators[i], false);

        }    

        ValidatorEnable(document.getElementById('<%= rvStudentName.ClientID %>'), true);

      

        ValidatorEnable(document.getElementById('<%= rfvReligion.ClientID %>'), true);   

    }

    function enableMusicInfoValidators()

    {    

        for(i=0;i< Page_Validators.length;i++)

        {

            

            ValidatorEnable(Page_Validators[i], false);

        }    

        ValidatorEnable(document.getElementById('<%= rfvInstrument.ClientID %>'), true);

        ValidatorEnable(document.getElementById('<%= rfvavgpractice.ClientID %>'), true);

        ValidatorEnable(document.getElementById('<%= rfvPresentSchool.ClientID %>'), true); 

        ValidatorEnable(document.getElementById('<%= rfvHeadTeacher.ClientID %>'), true);

        ValidatorEnable(document.getElementById('<%= rfvMusicTeacher.ClientID %>'), true);

      

    }

    function GetMusicalExpValue(id)

    {

        var val=document.getElementById(id).value;

       if(val=='Y')

       {

          document.getElementById('tab_menu3').style.display="";

         document.getElementById('tab_menu5').style.display="none";

         ShowDiv('outermenu1','outermenu2')

       }

       else

       {

         document.getElementById('tab_menu3').style.display="none";

         document.getElementById('tab_menu5').style.display="";

         ShowDiv('outermenu1','outermenu3')

       }

    }

    function SelectTabs(id)

    {

        var val=document.getElementById(id).value;

      

       if(val=='Y')

       {

         document.getElementById('tab_menu3').style.display="";

         document.getElementById('tab_menu5').style.display="none";

         ShowDiv('outermenu2','outermenu3')

       }

       else

       {

         document.getElementById('tab_menu3').style.display="none";

         document.getElementById('tab_menu5').style.display="";

         ShowDiv('outermenu2','outermenu3')

       }

    }

    function SelectLastDivTab(id)

    {

      var val=document.getElementById(id).value;

      

       if(val=='Y')

       {

         document.getElementById('tab_menu4').style.display="";

         document.getElementById('tab_menu6').style.display="none";

         ShowDiv('outermenu3','outermenu4')

       }

       else

       {

         document.getElementById('tab_menu4').style.display="none";

         document.getElementById('tab_menu6').style.display="";

         ShowDiv('outermenu3','outermenu4')

       }

    }

    function RunClientCode()

    {

      

      alert('hello');

        

    }

    function ShowDiv(currid, showid)

    { 

            if(currid=='outermenu1')

            {

               ValidatorEnable(document.getElementById('<%=rfvInstrument.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=cvddlExperience.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvavgpractice.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=cvMusicParticipation.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtName.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtLocation.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=CustomValidator9.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtPrize.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvPresentSchool.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvHeadTeacher.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvMusicTeacher.ClientID %>'),false);

              

               ValidatorEnable(document.getElementById('<%=rfvTxtFatherName.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtFatherOccupation.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtFatherCompany.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=CustomValidator10.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtFatherTelephone.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtFatherEmail.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= rfvTxtMotherName.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= rfvTxtMotherOccupation.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= rfvTxtMotherCompany.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=CustomValidator11.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtMotherTelephone.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtMotherEmail.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName1.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone1.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName2.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone2.ClientID %>'),false);

            

               ValidatorEnable(document.getElementById('<%= rfvFuPassportPhoto.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= rfvFUPassportCopy.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= CustomValidator13.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= cvChkRead.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= CustomValidator12.ClientID %>'),false);

               ValidatorEnable(document.getElementById('<%= rfvTxtPersonsName.ClientID %>'),false);

             }

            if(currid=='outermenu2')

            {

               ValidatorEnable(document.getElementById('<%=rfvInstrument.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%=cvddlExperience.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%=rfvavgpractice.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%=cvMusicParticipation.ClientID %>'),true);

              

               if(document.getElementById('<%=ddlMusicParticipation.ClientID %>').value == 'Y')

               {

                ValidatorEnable(document.getElementById('<%=rfvTxtName.ClientID %>'),true);

                ValidatorEnable(document.getElementById('<%=rfvTxtLocation.ClientID %>'),true);

                ValidatorEnable(document.getElementById('<%=CustomValidator9.ClientID %>'),true);

                ValidatorEnable(document.getElementById('<%=rfvTxtPrize.ClientID %>'),true);

               }

               else

               {

                 ValidatorEnable(document.getElementById('<%=rfvTxtName.ClientID %>'),false);

                ValidatorEnable(document.getElementById('<%=rfvTxtLocation.ClientID %>'),false);

                ValidatorEnable(document.getElementById('<%=CustomValidator9.ClientID %>'),false);

                ValidatorEnable(document.getElementById('<%=rfvTxtPrize.ClientID %>'),false);

               }

              

               ValidatorEnable(document.getElementById('<%=rfvPresentSchool.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%=rfvHeadTeacher.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%=rfvMusicTeacher.ClientID %>'),true);

            }

           

            if(currid=='outermenu3')

            {

               var birth_day=document.getElementById('<%=ddlDobDate.ClientID %>').value;

               var birth_month=document.getElementById('<%=ddlDobMonth.ClientID %>').value;

               var birth_year=document.getElementById('<%=ddlDobYear.ClientID %>').value;

               today_date = new Date();

                today_year = today_date.getYear();

                today_month = today_date.getMonth();

                today_day = today_date.getDate();

                age = (today_year + 1900) - birth_year;

                if ( today_month < (birth_month - 1))

                {

                 age--;

                 }

                if (((birth_month - 1) == today_month) && (today_day < birth_day))

                {

                    age--;

                }

                if (age > 1900)

                {

                 age -= 1900;

                 }

                 if(age>18)

                 {

                     ValidatorEnable(document.getElementById('<%=rfvTxtFatherName.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherOccupation.ClientID %>'),false);

                     ValidatorEnable(document.getElementById('<%=rfvTxtFatherCompany.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=CustomValidator10.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherTelephone.ClientID %>'),false);

                     ValidatorEnable(document.getElementById('<%=rfvTxtFatherEmail.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%= rfvTxtMotherName.ClientID %>'),false);

                     ValidatorEnable(document.getElementById('<%= rfvTxtMotherOccupation.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%= rfvTxtMotherCompany.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=CustomValidator11.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtMotherTelephone.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtMotherEmail.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName1.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone1.ClientID %>'),false);

                     ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName2.ClientID %>'),false);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone2.ClientID %>'),false);

               }

               else

               {

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherName.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherOccupation.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherCompany.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=CustomValidator10.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherTelephone.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtFatherEmail.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%= rfvTxtMotherName.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%= rfvTxtMotherOccupation.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%= rfvTxtMotherCompany.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=CustomValidator11.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtMotherTelephone.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtMotherEmail.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName1.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone1.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyName2.ClientID %>'),true);

                    ValidatorEnable(document.getElementById('<%=rfvTxtEmergencyTelephone2.ClientID %>'),true);

               }

            }

            if(currid=='outermenu4')

            {

               

               ValidatorEnable(document.getElementById('<%= CustomValidator13.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%= cvChkRead.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%= CustomValidator12.ClientID %>'),true);

               ValidatorEnable(document.getElementById('<%= rfvTxtPersonsName.ClientID %>'),true);

            }

         if(Page_ClientValidate())

         {      

                  

                var currdivlayer = document.getElementById(currid);

                var showdivlayer = document.getElementById(showid);

               

                if(showdivlayer.style.display == "none")

                {  

                     showdivlayer.style.display = "";

                     currdivlayer.style.display = "none";

                }

                else

                {

                    showdivlayer.style.display = "none";

                }

            }

           

     }

    </script>

    <style type="text/css" media="all">

        @import url("../common/css/onlineapplication.css");

       

    #tab_menu1{float:left; width:100%; height:45px;}

    #tab_menu1 ul{ height:45px; list-style:none;}

    #tab_menu1 ul li{float:left; line-height:45px;}

    #tab_menu1 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu1 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu1 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu1 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu1 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu1 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu1 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu1 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu1 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu1 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu1 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu1 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu1 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu1 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu1 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu2{float:left; width:100%; height:45px;}

    #tab_menu2 ul{ height:45px; list-style:none;}

    #tab_menu2 ul li{float:left; line-height:45px;}

    #tab_menu2 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu2 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu2 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu2 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu2 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu2 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu2 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu2 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu2 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu2 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu2 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu2 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu2 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu2 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu2 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu3{float:left; width:100%; height:45px;}

    #tab_menu3 ul{ height:45px; list-style:none;}

    #tab_menu3 ul li{float:left; line-height:45px;}

    #tab_menu3 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu3 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu3 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu3 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu3 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu3 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu3 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu3 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu3 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu3 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu3 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu3 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu3 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu3 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu3 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu4{float:left; width:100%; height:45px;}

    #tab_menu4 ul{ height:45px; list-style:none;}

    #tab_menu4 ul li{float:left; line-height:45px;}

    #tab_menu4 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu4 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu4 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu4 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu4 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu4 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu4 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu4 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu4 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu4 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu4 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu4 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu4 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu4 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu4 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu5{float:left; width:100%; height:45px;}

    #tab_menu5 ul{ height:45px; list-style:none;}

    #tab_menu5 ul li{float:left; line-height:45px;}

    #tab_menu5 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu5 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu5 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu5 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu5 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu5 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu5 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu5 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu5 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu5 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu5 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu5 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu5 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu5 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu5 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu6{float:left; width:100%; height:45px;}

    #tab_menu6 ul{ height:45px; list-style:none;}

    #tab_menu6 ul li{float:left; line-height:45px;}

    #tab_menu6 ul li.normal{float:left; line-height:45px; padding-left:36px; font-size:13px; color:#969899; font-weight:bold; background:url(images/tab_left_bg.gif) no-repeat 0 0;}

    #tab_menu6 ul li.normal span{float:left; padding:0px 36px 0 20px; background:url(images/tab_right_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:0;}

    #tab_menu6 ul li.normal span span{ padding:0 5px 0 0; background:none; margin:0px;font-size:23px; color:#969899; font-weight:normal;}

    #tab_menu6 ul li.active a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; position:relative; z-index:4}

    #tab_menu6 ul li.active a span{float:left; padding:0px 36px 0 0; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:4;}

    #tab_menu6 ul li.active a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu6 ul li.active_2 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:3;}

    #tab_menu6 ul li.active_2 a span{float:left; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:3;}

    #tab_menu6 ul li.active_2 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu6 ul li.active_3 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:2;}

    #tab_menu6 ul li.active_3 a span{float:left; width:auto; padding:0px 36px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:2;}

    #tab_menu6 ul li.active_3 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    #tab_menu6 ul li.active_4 a{float:left; font-size:13px; color:#651d46; font-weight:bold; text-decoration:none; background:url(images/tab_left_active_bg.gif) no-repeat 0 0; padding-left:10px; z-index:1;}

    #tab_menu6 ul li.active_4 a span{float:left; padding:0px 55px 0 35px; background:url(images/tab_right_active_bg.png) no-repeat right 0; margin-right:-36px; display:inline; position:relative; z-index:1;}

    #tab_menu6 ul li.active_4 a span span{ padding:0 5px 0 0; font-weight:normal; background:none; margin:0px;font-size:23px; color:#651d46;}

    </style>

    <div id="outermenu1" class="row">

    <div id="online_application_container1">

        <div class="curv">

            <img src="../Images/full_width_container_top_curv.gif" alt="" /></div>

        <div class="inner_content_container">

            <h2>Online Application</h2>

            <div id="tab_menu1">

                <ul>

                    <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                    <li class="normal"><span><span>2</span>Music Background</span></li>

                    <li class="normal"><span><span>3</span>Parent’s Details</span></li>

                    <li class="normal"><span><span>4</span>Uploads</span></li>

                </ul>

            </div>

            <div id="information_form">

                <form action="#" >

                <fieldset>

                    <div class="row">

                        <asp:Label ID="lblStudentName" runat="server" Text="Full Name of Student: "></asp:Label>

                         <div class="input_bg">

                            <asp:TextBox ID="txtStudentName" runat="server"></asp:TextBox>

                          <asp:RequiredFieldValidator ID="rvStudentName" runat="server"

                                 ControlToValidate="txtStudentName" ErrorMessage="*" Display="Dynamic"></asp:RequiredFieldValidator>

                         </div>

                      

                    </div>

                  

                    <div class="row">

                      

                        <asp:DropDownList ID="ddlGender" runat="server">

                            <asp:ListItem>Gender:</asp:ListItem>

                            <asp:ListItem>Male</asp:ListItem>

                            <asp:ListItem>Female</asp:ListItem>

                        </asp:DropDownList>

                         <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="*" ControlToValidate="ddlGender" ClientValidationFunction="ddlGenderClient_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblDob" runat="server" Text="Date of Birth: "></asp:Label>

                        <asp:DropDownList ID="ddlDobDate" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Day</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlDobMonth" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Month</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlDobYear" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Year</asp:ListItem>

                        </asp:DropDownList>

                            <asp:CustomValidator ID="CustomValidator2" runat="server" ErrorMessage="*" ClientValidationFunction="ddlDateOfBirth_validate"></asp:CustomValidator>

                        <div class="input_bg">

                            <asp:TextBox ID="txtCityCountry" CssClass="city" runat="server" onfocus="clearText(this);">City & Country of</asp:TextBox>

                          <asp:CustomValidator ID="CustomValidator3" runat="server" ErrorMessage="*" ClientValidationFunction="txtCityCountry_validate"></asp:CustomValidator> 

                        </div>

                       

                    </div>

                    <div class="row">

                        <asp:DropDownList ID="ddlNationality" CssClass="nationality" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Nationality:</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="CustomValidator4" runat="server" ErrorMessage="*" ClientValidationFunction="ddlNationality_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblReligion" runat="server" Text="Religion: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtReligion" CssClass="school" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvReligion" runat="server" ControlToValidate="txtReligion"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <h3>

                        Please indicate which instrument you would like your child to be taught</h3>

                    <div class="row">

                        <asp:DropDownList CssClass="first" ID="ddlInstrumentChoice1" runat="server">

                            <asp:ListItem>First Choice:</asp:ListItem>

                            <asp:ListItem>Instrument 1</asp:ListItem>

                            <asp:ListItem>Instrument 2</asp:ListItem>

                            <asp:ListItem>Instrument 3</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="CustomValidator5" runat="server" ErrorMessage="*" ControlToValidate="ddlInstrumentChoice1" ClientValidationFunction="ddlInstrumentChoice1_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:DropDownList CssClass="second" ID="ddlInstrumentChoice2" runat="server">

                            <asp:ListItem>Second Choice:</asp:ListItem>

                            <asp:ListItem>Instrument1</asp:ListItem>

                            <asp:ListItem>Instrument2</asp:ListItem>

                            <asp:ListItem>Instrument3</asp:ListItem>

                        </asp:DropDownList>

                    </div>

                    <h3>

                        Does your child have any musical experience?</h3>

                    <div class="row">

                        <asp:DropDownList ID="ddlMusicalExperience" CssClass="yes" runat="server"> 

                            <asp:ListItem Value="">Select</asp:ListItem>

                            <asp:ListItem Value="Y">Yes</asp:ListItem>

                            <asp:ListItem Value="N">No</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="CustomValidator6" runat="server" ErrorMessage="*" ControlToValidate="ddlMusicalExperience" ClientValidationFunction="ddlMusicalExperience_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblNote" runat="server" Text="Please note that if your child has no, QMA will still actively consider your application"></asp:Label>

                    </div>

                    <div class="row_2">

                      <input id="btnNext1" type="button" value="Next >>" onclick="GetMusicalExpValue('<%= ddlMusicalExperience.ClientID %>');"/>

                   

                

                    </div>

                </fieldset>

                </form>

            </div>

           

        </div>

        <div class="curv">

            <img src="../Images/full_width_container_bot_curv.gif" alt="" /></div>

    </div>

    </div>

    <div id="outermenu2" class="row" style="display:none">

    <div id="online_application_container2">

        <div class="curv">

            <img src="../Images/full_width_container_top_curv.gif" alt="" /></div>

        <div class="inner_content_container">

            <h2>

                Online Application</h2>

            <div id="tab_menu2">

                <ul>

                    <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                    <li class="active_2"><a href="#"><span><span>2</span>Music Background</span></a></li>

                    <li class="normal"><span><span>3</span>Parent’s Details</span></li>

                    <li class="normal"><span><span>4</span>Uploads</span></li>

                </ul>

            </div>

            <div id="music_information_form">

                <form action="#">

                <fieldset>

                    <h3>

                        Please provide details on music experience to date</h3>

                    <div class="row">

                        <asp:Label CssClass="big" ID="lblInstrument" runat="server" Text="Instrument: "></asp:Label>

                        <div class="textarea">

                            <asp:TextBox ID="txtInstrument" runat="server" TextMode="MultiLine"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvInstrument" runat="server" ControlToValidate="txtInstrument"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblExperience" runat="server" Text="Experience: "></asp:Label>

                        <asp:DropDownList ID="ddlExpDate" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Day</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlExpMonth" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Month</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlExpYear" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Year</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="cvddlExperience" runat="server" ErrorMessage="*" ClientValidationFunction="ddlExperience_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:Label CssClass="big" ID="lblExamination" runat="server" Text="List any exams taken and results: "></asp:Label>

                        <div class="textarea">

                            <asp:TextBox ID="txtExaminations" runat="server" TextMode="MultiLine"></asp:TextBox>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label CssClass="time" ID="lblAvgPractice" runat="server" Text="Average Daily Practice Time: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox  CssClass="small"  ID="txtAvgPractice" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvavgpractice" runat="server" ControlToValidate="txtAvgPractice"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblMusicParticipation" runat="server" Text="Has your child participated in any music competitions?"></asp:Label>

                        <asp:DropDownList ID="ddlMusicParticipation" runat="server" onchange="HideTextBox(this);">

                            <asp:ListItem Value="S">Select</asp:ListItem>

                            <asp:ListItem Value="Y">Yes</asp:ListItem>

                            <asp:ListItem Value="N">No</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="cvMusicParticipation" runat="server" ErrorMessage="*" ClientValidationFunction="ddlMusicParticipation_Validate"> </asp:CustomValidator>

                    </div>

                    <div class="row" style="display:none" id="music1">

                        <asp:Label CssClass="name" Width="14%" ID="lblName" runat="server" Text="Name: " ></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtName" CssClass="big" runat="server"></asp:TextBox>

                                          <asp:RequiredFieldValidator ID="rfvTxtName" runat="server" ErrorMessage="*" ControlToValidate="txtName"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                  <div class="row" style="display:none" id="music2">

                        <asp:Label  Width="14%"  CssClass="name" ID="lblLocation" runat="server" Text="Location: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox CssClass="big" ID="txtLocation" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtLocation" runat="server" ErrorMessage="*" ControlToValidate="txtLocation"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                   <div class="row" style="display:none" id="music3">

                        <asp:Label Width="115" ID="lblParticipationDate" runat="server" Text="Date: "></asp:Label>

                        <asp:DropDownList ID="ddlParticipationDate" runat="server" AppendDataBoundItems="true" >

                            <asp:ListItem>Day</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlParticipationMonth" runat="server" AppendDataBoundItems="true" >

                            <asp:ListItem>Month</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlParticipationYear" runat="server" AppendDataBoundItems="true" >

                            <asp:ListItem>Year</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="CustomValidator9" runat="server" ErrorMessage="*" ClientValidationFunction="ddlParticipationDate_validate"></asp:CustomValidator>

                   </div>

                    <div class="row" style="display:none" id="music4">

                        <asp:Label ID="lblPrize" Width="14%" CssClass="name" runat="server" Text="Prize: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox CssClass="big" ID="txtPrize" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtPrize" runat="server" ErrorMessage="*" ControlToValidate="txtPrize"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <h3 class="heading">

                        Student’s educational background</h3>

                    <div class="row">

                        <asp:Label Width="20%" CssClass="student_name" ID="lblPresentSchool" runat="server" Text="Present School: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtPresentSchool" CssClass="big" runat="server"></asp:TextBox>

                            &nbsp;<asp:RequiredFieldValidator ID="rfvPresentSchool" runat="server" ControlToValidate="txtPresentSchool"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label Width="20%" ID="lblHeadTeacher" CssClass="student_name" runat="server" Text="Name of Head Teacher: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtHeadTeacher" CssClass="big" runat="server"></asp:TextBox>

                            &nbsp;<asp:RequiredFieldValidator ID="rfvHeadTeacher" runat="server" ControlToValidate="txtHeadTeacher"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label  Width="20%" CssClass="student_name" ID="lblMusicTeacher" runat="server" Text="Name of Music Teacher: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtMusicTeacher" CssClass="big" runat="server"></asp:TextBox>

                            &nbsp;<asp:RequiredFieldValidator ID="rfvMusicTeacher" runat="server" ControlToValidate="txtMusicTeacher"

                                Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <h3 class="heading">

                        How can we best contact you regarding application status?</h3>

                    <div class="row">

                        <asp:Label Width="20%" ID="lblResPhone" CssClass="student_name" runat="server" Text="Residence Telephone: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtResPhone" CssClass="big" runat="server"></asp:TextBox>

                            

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label Width="20%" CssClass="student_name" ID="lblMobNumber" runat="server" Text="Mobile: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtMobile" CssClass="big" runat="server"></asp:TextBox>

                           

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label Width="20%" ID="lblEmail" CssClass="student_name" runat="server" Text="Email: "></asp:Label>

                       

                        <div class="input_bg">

                            <asp:TextBox ID="txtEmail" CssClass="big" runat="server"></asp:TextBox>

                            

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblPOBox" Width="20%" CssClass="student_name" runat="server" Text="PO Box: "></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox ID="txtPOBox" CssClass="big" runat="server"></asp:TextBox>

                          

                        </div>

                    </div>

                   <div class="row_2">

                    <input id="btnNext2" type="button" value="Next >>" onclick="SelectTabs('<%= ddlMusicalExperience.ClientID %>');"/>

                        <%--<asp:LinkButton ID="lnkNext2" CssClass="next" runat="server">Next &gt;&gt;</asp:LinkButton>        --%>     </div>

                </fieldset>

                </form>

            </div>

        </div>

        <div class="curv">

            <img src="../Images/full_width_container_bot_curv.gif" alt="" /></div>

    </div>

    </div>

    <div id="outermenu3" class="row" style="display: none">

    <div id="online_application_container3">

        <div class="curv">

            <img src="../Images/full_width_container_top_curv.gif" alt="" /></div>

        <div class="inner_content_container">

            <h2>

                Online Application</h2>

               

            <div id="tab_menu3">

                <ul>

                        <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                        <li class="active_2"><a href="#"><span><span>2</span>Music Background</span></a></li>

                        <li class="active_3"><a href="#"><span><span>3</span>Parent’s Details</span></a></li>

                        <li class="normal"><span><span>4</span>Uploads</span></li>

                      </ul>

            </div>

           

           

            <div id="tab_menu5">

                <ul>

                        <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                        <li class="normal"><span><span>2</span>Music Background</span></li>

                        <li class="active_2"><a href="#"><span><span>3</span>Parent’s Details</span></a></li>

                        <li class="normal"><span><span>4</span>Uploads</span></li>

                      </ul>

            </div>

           

          

           

           

            <div id="contact_form">

                      <form action="#">

                        <fieldset>

                        <h3 class="heading">Father’s Information</h3>

                        <div class="row">

                         <asp:Label Width="10%" ID="lblFName" CssClass="name" runat="server" Text="Full Name: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtFatherName" runat="server"></asp:TextBox>

                              <asp:RequiredFieldValidator ID="rfvTxtFatherName" runat="server" ErrorMessage="*" ControlToValidate="txtFatherName" ></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblFOccupation" CssClass="name" runat="server" Text="Occupation: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtFatherOccupation" runat="server"></asp:TextBox>

                           <asp:RequiredFieldValidator ID="rfvTxtFatherOccupation" runat="server" ErrorMessage="*" ControlToValidate="txtFatherOccupation" ></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblFCompany" CssClass="name" runat="server" Text="Company: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtFatherCompany"   runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtFatherCompany" runat="server" ErrorMessage="*" ControlToValidate="txtFatherCompany" ></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblFNationality" CssClass="name" runat="server" Text="Nationality: "></asp:Label>

                          <asp:DropDownList ID="ddlFatherNationality" CssClass="nationality" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Nationality:</asp:ListItem>

                        </asp:DropDownList>

                            <asp:CustomValidator ID="CustomValidator10" runat="server" ErrorMessage="*" ClientValidationFunction="ddlFatherNationality_validate"></asp:CustomValidator>

                        </div>

                        <div class="row">

                          <asp:Label  Width="10%" ID="lblFTelephone" CssClass="name" runat="server" Text="Telephone: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtFatherTelephone"   runat="server"></asp:TextBox>

                              <asp:RequiredFieldValidator ID="rfvTxtFatherTelephone" runat="server" ErrorMessage="*" ControlToValidate="txtFatherTelephone"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                        <asp:Label Width="10%" ID="lblFEmail" CssClass="name" runat="server" Text="Email: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtFatherEmail"   runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtFatherEmail" runat="server" ErrorMessage="*" ControlToValidate="txtFatherEmail"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <h3>Mother’s Information</h3>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblMFullName"  CssClass="name" runat="server" Text="Full Name: "></asp:Label>

                          <div class="input_bg">

                              <asp:TextBox ID="txtMotherName"   runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtMotherName" runat="server" ErrorMessage="*" ControlToValidate="TxtMotherName"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                           <asp:Label Width="10%" ID="lblMOccupation" CssClass="name" runat="server" Text="Occupation: "></asp:Label>

                          <div class="input_bg">

                             <asp:TextBox ID="txtMotherOccupation"   runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtMotherOccupation" runat="server" ErrorMessage="*" ControlToValidate="txtMotherOccupation"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblMCompany" CssClass="name" runat="server" Text="Company: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtMotherCompany"   runat="server"></asp:TextBox>

                           <asp:RequiredFieldValidator ID="rfvTxtMotherCompany" runat="server" ErrorMessage="*" ControlToValidate="txtMotherCompany"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblMNationality" runat="server" Text="Nationality: "></asp:Label>

                          <asp:DropDownList CssClass="nationality" ID="ddlMotherNationality" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Nationality:</asp:ListItem>

                        </asp:DropDownList>

                            <asp:CustomValidator ID="CustomValidator11" runat="server" ErrorMessage="*" ClientValidationFunction="ddlMotherNationality_Validate"></asp:CustomValidator>

                        </div>

                        <div class="row">

                          <asp:Label Width="10%" ID="lblMTelephone" CssClass="name" runat="server" Text="Telephone: "></asp:Label>

                          <div class="input_bg">

                          <asp:TextBox ID="txtMotherTelephone"   runat="server"></asp:TextBox>

                              <asp:RequiredFieldValidator ID="rfvTxtMotherTelephone" runat="server" ErrorMessage="*" ControlToValidate="txtMotherTelephone"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                         <asp:Label Width="10%" ID="lblMEmail" CssClass="name" runat="server" Text="Email: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtMotherEmail" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtMotherEmail" runat="server" ErrorMessage="*" ControlToValidate="txtMotherEmail"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <h3>Emergency Contacts</h3>

                        <div class="row">

                           <asp:Label Width="10%" ID="lblEmergencyName1" CssClass="name" runat="server" Text="Full Name: "></asp:Label>

                          <div class="input_bg">

                            <asp:TextBox ID="txtEmergencyName1"   runat="server"></asp:TextBox>

                          <asp:RequiredFieldValidator ID="rfvTxtEmergencyName1" runat="server" ErrorMessage="*" ControlToValidate="txtEmergencyName1"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                         <asp:Label Width="10%" ID="lblEmergencyTelephone1" CssClass="name" runat="server" Text="Telephone: "></asp:Label>

                          <div class="input_bg">

                             <asp:TextBox ID="txtEmergencyTelephone1"   runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtEmergencyTelephone1" runat="server" ErrorMessage="*" ControlToValidate="txtEmergencyTelephone1"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                                    <div class="emergency">

                        <div class="row">

                            <asp:Label Width="10%" ID="lblEmergencyName2" CssClass="name" runat="server" Text="Full Name: "></asp:Label>

                          <div class="input_bg">

                              <asp:TextBox ID="txtEmergencyName2"   runat="server"></asp:TextBox>

                             <asp:RequiredFieldValidator ID="rfvTxtEmergencyName2" runat="server" ErrorMessage="*" ControlToValidate="txtEmergencyName2"></asp:RequiredFieldValidator>

                          </div>

                        </div>

                        <div class="row">

                            <asp:Label Width="10%" ID="lblEmergencyTelephone2" CssClass="name" runat="server" Text="Telephone: "></asp:Label>

                            <div class="input_bg">

                          <asp:TextBox ID="txtEmergencyTelephone2"   runat="server"></asp:TextBox>

                          <asp:RequiredFieldValidator ID="rfvTxtEmergencyTelephone2" runat="server" ErrorMessage="*" ControlToValidate="txtEmergencyTelephone2"></asp:RequiredFieldValidator>

                           </div>

                        </div>

                        </div>

                        <div class="row_2">

                          <%--<asp:LinkButton ID="lnkNext3" CssClass="next" runat="server" >Next &gt;&gt;</asp:LinkButton>--%>

                          <input id="btnNext3" type="button" value="Next >>" onclick="SelectLastDivTab('<%= ddlMusicalExperience.ClientID %>');"/>

                        </div>

                        </fieldset>

                      </form>

                    </div>

            

             </div>

        <div class="curv">

            <img src="../Images/full_width_container_bot_curv.gif" alt="" /></div>

    </div>

    </div>

    <div id="outermenu4" class="row" style="display: none">

    <div id="online_application_container4">

        <div class="curv">

            <img src="../Images/full_width_container_top_curv.gif" alt="" /></div>

        <div class="inner_content_container">

            <h2>

                Online Application</h2>

               

               

            <div id="tab_menu4" style="display:none">

               <ul>

                    <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                    <li class="active_2"><a href="#"><span><span>2</span>Music Background</span></a></li>

                    <li class="active_3"><a href="#"><span><span>3</span>Contact Details</span></a></li>

                    <li class="active_4"><a href="#"><span><span>4</span>Uploads</span></a></li>

                </ul>

            </div>

          

            <div id="tab_menu6" style="display:none">

                <ul>

                        <li class="active"><a href="#"><span><span>1</span>Student Information</span></a></li>

                        <li class="normal"><span><span>2</span>Music Background</span></li>

                        <li class="active_2"><a href="#"><span><span>3</span>Parent’s Details</span></a></li>

                        <li class="active_3"><a href="#"><span><span>4</span>Uploads</span></a></li>

                      </ul>

            </div>

           

           

           

            <div id="required_form">

                <form action="#">

                <fieldset>

                    <h3>

                        Required Documents:</h3>

                    <div class="row">

                   

                        <asp:Label ID="lblPassportPhoto" runat="server" Text="Passport Photo: "></asp:Label>

                        <asp:FileUpload ID="fuPassportPhoto" runat="server" />

                        <asp:RequiredFieldValidator ID="rfvFuPassportPhoto" runat="server" ErrorMessage="*" ControlToValidate="fuPassportPhoto"></asp:RequiredFieldValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblPassportCopy" runat="server" Text="Passport Copy: "></asp:Label>

                        <asp:FileUpload ID="FUPassportCopy" runat="server" />

                       <asp:RequiredFieldValidator ID="rfvFUPassportCopy" runat="server" ErrorMessage="*" ControlToValidate="FUPassportCopy"></asp:RequiredFieldValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblOptDocs" CssClass="text" runat="server" Text="Optional Supporting Documents: "></asp:Label>

                    </div>

                    <div class="row">

                        <asp:FileUpload ID="FUSupportingDocs" runat="server" />

                    </div>

                    <div class="row">

                        <%--<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />--%>

                        <asp:ImageButton ID="imgbtnUpload" runat="server"

                            ImageUrl="~/common/images/upload.jpg" onClick="imgbtnUpload_Click" />

                            &nbsp;<asp:Label ID="lblErrMsg" runat="server" Text="Label" Visible="false"></asp:Label>

                            <input type="hidden" id="scrollPos" name="scrollPos" runat="server"/>

                    </div>

                    <div class="row">

                        <asp:CheckBox ID="chkCertify" runat="server" />&#160;&#160;

                        <asp:Label ID="lblCertify" runat="server" Text="I hereby certify that the information provided in this application is correct"></asp:Label>

                        <asp:CustomValidator ID="CustomValidator13" runat="server" ErrorMessage="*" ClientValidationFunction="chkCertify_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:CheckBox ID="chkRead" runat="server" />&#160;&#160;

                        <asp:Label ID="lblRead" runat="server" Text="I have read and accept the school's terms and conditions with regards to the preparatory programme"></asp:Label>

                         <asp:CustomValidator ID="cvChkRead" runat="server" ErrorMessage="*" ClientValidationFunction="chkRead_validate"></asp:CustomValidator>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblTodaysDate" Width="8%" runat="server" Text="Date"></asp:Label>

                        <asp:DropDownList ID="ddlTodaysDate" CssClass="day" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Day</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlTodaysMonth" CssClass="month" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Month</asp:ListItem>

                        </asp:DropDownList>

                        <asp:DropDownList ID="ddlTodaysYear" CssClass="day" runat="server" AppendDataBoundItems="true">

                            <asp:ListItem>Year</asp:ListItem>

                        </asp:DropDownList>

                        <asp:CustomValidator ID="CustomValidator12" runat="server" ErrorMessage="*" ClientValidationFunction="ddlTodaysDate_Validate"></asp:CustomValidator>

                       

                    </div>

                    <div class="row">

                        <asp:Label CssClass="name" Width="8%" ID="lblPersonsName" runat="server" Text="Name"></asp:Label>

                        <div class="input_bg">

                            <asp:TextBox CssClass="big" ID="txtPersonsName" runat="server"></asp:TextBox>

                            <asp:RequiredFieldValidator ID="rfvTxtPersonsName" runat="server" ErrorMessage="*" ControlToValidate="txtPersonsName"></asp:RequiredFieldValidator>

                        </div>

                    </div>

                    <div class="row">

                        <asp:Label ID="lblLastNote" CssClass="text" runat="server" Text="Please note that this is an application for admission and does not guarantee enrollment"></asp:Label>

                    </div>

                    <div class="row">

                        <%--<asp:Button ID="btnSubmit"  runat="server" Text="Submit" OnClick="btnSubmit_Click" />--%>

                        <asp:ImageButton ID="imgbtnSubmit" runat="server" ImageUrl="~/common/images/submit.jpg" />

                    </div>

                </fieldset>

                </form>

            </div>

           

           </div>

        <div class="curv">

            <img src="../Images/full_width_container_bot_curv.gif" alt="" /></div>

    </div>

    </div>

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Sep 2010
    Link to this post
    Hello Sony,

    But the button in another div outside of div4. The new div will have the same classes and thus you will be able to see it. This will not change the appearance nor functionality you have.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered