Hide a field from NewForm.aspx

Updated (18/03/2008): There's an extended custom web part made by Paul that does the same thing and much more. You can start reading from here.

I was faced with this problem lately: you have a optional field in your list that you'd like to leave hidden from the user (it's used for workflow status keeping).

The first solution is to customize NewForm.aspx from SharePoint Designer and replace the default list form with Custom List Form, in which you can remove the fields you don't need. The inconvenience is that you lose the ability to attach files to the list item. As I had to attach files to the list, this option was unacceptable.

Fortunately, there is another way to hide a field. You can customize NewForm.aspx and add a JavaScript code that hides the whole row the field is placed. I used the code snippet from SharePoint Designer blog and I came out with this small code block, to be placed on NewForm.aspx (or EditForm.aspx, as you wish).

You have to replace these fields (see the SPD blog entry for more information):

• TAGNAME: HTML element that is being rendered ("SELECT", "INPUT"...)

• IDENTIFIER: SharePoint field type identifier ("TextField", "DropDownChoice"...)

• FIELD NAME: Display name of the field (e.g. "Status", "Customer Name"...)

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

  

\_spBodyOnLoadFunctionNames.push("hideFields");

  

  

function hideFields() {

  

var control = getTagFromIdentifierAndTitle("TAGNAME","IDENTIFIER","FIELD NAME");

  

control.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\>