Logo 
Search:

Sharepoint 2010 Articles

Submit Article
Home » Articles » Sharepoint 2010 » CollaborationRSS Feeds

How to hide Fields in SharePoint Custom List with Drop down value

Posted By: Destin Joy     Category: Sharepoint 2010     Views: 8158

How to hide Fields in SharePoint Custom List with Drop down value

In this article I am describing how we can use JavaScript to hide/Unhide fields in SharePoint Custom list. This is somewhat easy if you just want to hide some field using JavaScript but here I am showing how to hide field based on Drop down data change.


For the Demo purpose I have created following columns

  1. Title-Default field
  2. Voter –Dropdown with values Coder and Manager
  3. Best Manager-Text box
  4. Name-Text box

Our objective when I select Code from Drop down I need to make Best Manager Field visible.

 

Now just add a content editor web part as shown below and add below the list web part


Now go to source editor and paste the below code

<script type="text/javascript">

var ddlLayout=document.getElementById('ctl00_m_g_79d8b96c_0fc3_4ce6_ba2b_a753fb3ba042_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_DropDownChoice');


//Where the above id starting with ct00 is the drop down client ID I taken using IE 9 developer tools


//

var txtUserMsg=document.getElementById('ctl00_m_g_79d8b96c_0fc3_4ce6_ba2b_a753fb3ba042_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField')


//Where the above id starting with ct00 is the field  client ID that I want to hide, I taken using IE 9 developer tools.Initially I made this to hide on page load


txtUserMsg.style.borderStyle="none";


var tables;

tables=ddlLayout.offsetParent.offsetParent;

hideTable(tables,'Best M',34,40);


//This is used to hide the text on the field

ddlLayout.onchange = function(){setactivity(ddlLayout)};


//I am calling the fucnction on Drop down change

function setactivity(ch)

{

    var  active=ch[ch.selectedIndex].value;

if(active=="Manager")

{

hideTable(tables,'Best M',34,40);

}

else if(active=="Coder")

{

showTable(tables,'Best M',34,40) ;

}

}


function hideTable(table,ctrl,start,end)

{

                for(i=1;i&lt;tables.rows.length;i++)

                {

                                str = tables.rows[i].cells[0].innerHTML;

                                str = str.substring(start,end)

                                if(str == ctrl)

                                tables.rows[i].style.display='none'

        }


function showTable(table,ctrl,start,end)

{

                for(i=1;i&lt;tables.rows.length;i++)

                {

                                str = tables.rows[i].cells[0].innerHTML;

                                str = str.substring(start,end)

                                if(str == ctrl)

                                tables.rows[i].style.display='inline'

                }

}

</Script>

Now you can see  when I select Code from the Drop down Best Manager field can be visible

Share: 



Destin Joy
Destin Joy author of How to hide Fields in SharePoint Custom List with Drop down value is from Pathanamthitta, India. Destin Joy says

 Hello Everyone,

I am Destin Joy from India I have MCPD in SharePoint 2010, MCTS SharePoint 2010 application development and MCTS in SharePoint 2007. I am mostly working in  core part of SharePoint (2010-2007) and passionate about new Microsoft technologies. Born and brought up in Kerala You can reach me  @ Destin.Joy@hotmail.com

 

 
View All Articles

 
Please enter your Comment

  • Comment should be atleast 30 Characters.
  • Please put code inside [Code] your code [/Code].

 
No Comment Found, Be the First to post comment!