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

5 Replies to “Show Columns in Newform.aspx based on Dropdown Selection”

  1. Can someone please help me with editing the Sharepoint features. Not aware of HTML and Java scripts. Any suggestion or inputs on whre to begin whil be a great help 🙂

  2. Hiii All of u..

    In my EditForm.aspx javascript does not work.
    May be some thing wrong in caling javascript.
    i have to show/hide row on the basis of drondown selection.

    Please help me to solve this problem.

    Thanx,
    Pratik Agrawal

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.