Using JavaScript event handlers in SharePoint List Form Page

I created a custom List Form page based on the default NewForm.aspx page. The custom Form includes a drop down list called Security Level, and a People Picker control (which is a pretty handy OOB SharePoint control). The People Picker control needs to be displayed only when a specific value is selected in the Security Level drop down list. Therefore I needed some sort of event handler that would check for the value selected in the drop down list and hide (or show) the People Picker control. And this event handler would need to be triggered on the "load' event of the custom Form, as well as the "onchange" event of the drop down list field.

Credits:
http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

http://boris.gomiunik.net/2008/04/add-functions-and-events-to-sharepoint-form-fields/

Here is the JavaScript solution that I came up with. I left the alert statements in the code, for debugging purposes. Insert this code in a Content Editor Web Part and ensure that it is hidden. Also, place the Content Editor Web Part at the very bottom of the page.

IMPORTANT: Insert the JavaScript OR operator (i.e. double pipe) after the identifier == "" portion in the if() statement in the getTagFromIdentifierAndTitle() function below. For some odd reason the OR operator gets removed whenever I publish the post.

<script type="text/javascript">

//This code runs on the onload event of the custom Form
_spBodyOnLoadFunctionNames.push("getSecurityLevelValue");

function hidePeoplePicker() {
//alert("HIDE");
var control = getTagFromIdentifierAndTitle('textarea','UserField_downlevelTextBox','People Picker');

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";

}

function showPeoplePicker() {
//alert("SHOW");
var control = getTagFromIdentifierAndTitle('textarea','UserField_downlevelTextBox','People Picker');

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="";

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{

//alert("tagName = " + tagName);
var len = identifier.length;
//alert("Len = " + len);

var tags = document.getElementsByTagName(tagName);
//alert("tags length = " + tags.length);

for (var i=0; i < tags.length; i++)
{

var tempString = tags[i].id;

//alert("tempString = " + tempString);

//NOTE: Insert the OR operator after the identifier == "" portion in the code below
//For some odd reason the OR operator gets removed when I post the blog
if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len))

{

return tags[i];

}

}

return null;

}

function getField(fieldType,fieldTitle) {

var docTags = document.getElementsByTagName(fieldType);

//alert("Length = " + docTags.length);

for (var i=0; i < docTags.length; i++) {

if (docTags[i].title == fieldTitle) {

//alert("Value in getField = " + docTags[i].value);

return docTags[i];

}

}

}

function getSecurityLevelValue() {

//alert("In getSecurityLevelValue");
selectedId = getField('select','Security Level').options[getField('select','Security Level').selectedIndex].value;

//alert("Value in hide =" + selectedId);

if(selectedId != 'Specific User')

{

//alert("NOT Specific User");
hidePeoplePicker();

}

else

{

//alert("Specific User");
showPeoplePicker();

}

}

//This code runs on the onchange event of the drop down list field
getField('select','Security Level').onchange = function() {getSecurityLevelValue()};

</script>

Hide People Picker control in SharePoint List Forms

I am working on a project that requires the SharePoint OOB "People Picker" control to be hidden in a List Form Page. In my case, this control was in the "NewForm.aspx" page. But you can use the same code for hiding this control in the "EditForm.aspx" page as well.

I used the following online resources to figure out the JavaScript code to hide the "People Picker" control:

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

http://www.cleverworkarounds.com/2008/02/07/more-sharepoint-branding-customisation-using-javascript-part-1/

Here is the JavaScript code. Insert this code in the "Source Editor..." window in a Content Editor Web Part.

IMPORTANT: Insert the JavaScript OR operator () after the identifier == "" portion in the
if() statement in the getTagFromIdentifierAndTitle() function below. For some odd reason the OR operator gets removed whenever I publish the post.

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

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {

var control = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","People Picker");

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++)

{

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len))

{

return tags[i];

}

}

return null;

}

</script>

NOTE: The "People Picker" control was embedded 12 levels "deep" from the <tr> tag in my NewForm.aspx, and hence I had to use the code in the hideFields() function with 12 "parent" references. I used the awesome Firebug tool to view this hierarchy and to also find out the elusive tagName, identifier, and title info for the People Picker control. The Firebug tool is a FireFox browser addon, and is incredibly helpful when you need to look at raw HTML and JavaScript code that renders SharePoint pages.