Hiding a Field in NewForm/EditForm/DisplayForm in SharePoint 2013 Using JavaScript

Introduction

This article explains how to hide a field in SharePoint 2013 in NewForm.aspx/EditForm.aspx/DisplayForm.aspx using JavaScript.

Prerequisites

The following are the prerequisites:

1. Ensure you have access to the Office 365 online/SharePoint site.
2. Ensure you have Prototype.js and SPUtility.js files.

Procedure

The following is the procedure to be followed:

1. Create a List and name it “MyList”.
2. Create a field called “Test” as a single line of text in MyList and click on OK.
   
   
3. Now go to NewForm.aspx by navigating to the following URL.
   
   https://YourSiteCollection/_layouts/15/start.aspx#/Lists/MyList/Newform.aspx
    
4. Click on Settings and then Edit page
   
   
   
   
5. Click on Add a Webpart and add Content Editor Webpart.
6. Now add a reference to Prototype.js and SPUtility.js file.
   
   <script type="text/javascript" src="/sites/Devsite/SPUtility.js"></script>
   <script type="text/javascript" src="/sites/Devsite/Prototype.js"></script>
    
7. Now we shall see how to hide the field in a list.Add the following lines of code to the content editor webpart.
   
   <script type="text/javascript">
   function display()
   {
   SPUtility.GetSPField('Test').Hide();
   }
   _spBodyOnLoadFunctionNames.push("display");
   </script>
    
8. GetSPField is a method in the SPUtility.js file that gets us the field object. your field that you want to hide. In our example it is “Test” field.
9. Now click on the Stop Editing button in the ribbon.
10. That's it!!! Now let's test the results.

Testing

1. Click on New item.
   
   
   
   
2. Now you will not be able to see the URL Test field.
   
   
   
   
3. Similarly if you want to hide a field in EditForm.aspx/DisplayForm.aspx then use the same procedure.

Summary

Thus in this article you saw how to hide a field in a list in SharePoint 2013 using JavaScript.