Show Columns in Newform.aspx based on Dropdown Selection

Multi Level Dropdowns in NewForm

In the below tutorial, i have two different set of Columns. Based on the
dropdown selection , I will show the set of columns for user to be filled in.

Step 1: Open Newform.aspx / Editform.aspx in SharePoint Designer.

Step 2: Close Webpart

Step 3: Insert -> SharePoint Controls -> Custom List Form

Step 4: Arrange Respective Team Columns into div tags or table tags with
Unique IDs

Step 5:Create one javascript file[main.js] and include in newform.aspx
    <script language="javascript" src="/Images/Main.js"></script>

Step6:  Remove those respective columns and organize into one Table or Div
with ID and by default

<tr> <td colspan="2"> <table cellpadding="0" cellspacing="0" id="Team1" style="display:none"> <tr> <td width="190px" valign="top" class="ms-formlabel"> <H3 class="ms-standardheader"> <nobr>Team1-TitleColumn<span class="ms-formvalidation"></span> </nobr> </H3> </td> <td width="400px" valign="top" class="ms-formbody"> <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff2′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Title’)}"/> <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Title" ControlMode="New"/> </td> </tr> <tr> <td width="190px" valign="top" class="ms-formlabel"> <H3 class="ms-standardheader"> <nobr>Team1-DescColumn</nobr> </H3> </td> <td width="400px" valign="top" class="ms-formbody"> <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Team1_x002d_DescColumn" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff3′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Team1_x002d_DescColumn’)}"/> <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Team1_x002d_DescColumn" ControlMode="New"/> </td> </tr> </table> </td> </tr>

Step 8: Get the ID for the dropdown through "View Source" or Select /Copy
dropdown from Browser and paste it in SharePoint Designer /Front Page/
Dreamweaver to get the ID.

Screen 1: Select and Copy from Browser

Screen2 : Paste it in SharePoint Designer

So the ID will be
:ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice
 

Step 9: Javascript code[Main.js] – Attach Event Listener to the Dropdown, So
onchange / onClick of the dropdown list. Respective team columns should be shown
/ Hiden

document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").attachEvent("onclick", ShowTeam); function ShowTeam() { w = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").selectedIndex; var PL = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").options[w].text; // Hidding all Teams Columns document.getElementById("Team1").style.display="none" document.getElementById("Team2").style.display="none" //Showing only the team which has been selected document.getElementById(PL).style.display="block" }

Step 9: Change dropdown value