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>