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