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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script>
$(document).ready(function()
{
$("input[title$='ShowFields']").click(function()
{
$("input[title$='Title']").parent('span').parent('td').parent('tr').toggle();
$("nobr:contains('Start Date')").parent('h3').parent('td').parent('tr').toggle();
$("nobr:contains('Due Date')").parent('h3').parent('td').parent('tr').toggle();
});
});
</script>

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.

0 comments:

Post a Comment