Saturday, May 3, 2008

How to Hide Fields in SharePoint List Form Pages using jQuery

Yesterday, one of friend ask me can we show/hide fields in Newform.aspx and Editform.aspx by clicking on checkbox. It can be done thru sharepoint designer with some rules. But I used jQuery with few lines of code in Task List. I added 1 more field i.e. ShowFields as choice field.

Then I added a content editor webpart on newform.aspx. MOSS wont allow to edit newform.aspx and editform.aspx. To add webpart on newforn.aspx / editform.aspx, add in &ToolPaneView=2 on the end of the url. So your url for newform.aspx will be http://portal/Lists/Tasks/NewForm.aspx?RootFolder=%2FLists%2FTasks&Source=http%3A%2F%2Fportal%2FLists%2FTasks%2FAllItems%2Easpx&ToolPaneView=2

In source editor of content editor web part, I have added following script

<script type="text/javascript" src=""></script>

$("nobr:contains('Start Date')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Due Date')").parent('h3').parent('td').parent('tr').toggle();

and close the webpart page. Then open newform.aspx, now whenever I click on Showfields Checkbox then Title/Start Date/Due Date fields are hidden, once I uncheck this it shows the fields again.


Post a Comment