With SharePoint we use a lot of lists and libraries to store and share information, we add and change this information with the help of forms. In most cases we create one form with all the information required for the content. Even if not all the information is required for all types of content or if it depends on a phase or status. With the help of jQuery and JavaScript we can create a more dynamic form that will hide/show fields based on selected values of fields. Make sure to disable the quick option, otherwise user will be able to edit the field outside of the provided solution.

SharePoint 2013/Online: Disable Quick edit

1. Open the list or library settings
2. Open the Advanced settings
   
3. Set Quick Edit to No

SharePoint 2010: Disable Datasheet editing

1. Open the list or library settings
2. Open the Advanced settings
   
3. Set Datasheet to No

JavaScript: New Form

1. Open your favorite JavaScript Editor.
2. Create a new JavaScript file called NewFormHideShow.js
3. Add the following base code to the JavaScript file.
   

   $( document ).ready(function() {
      
   }
   );

4. The first step is to hide the columns. Find the display names of the field that need to be hidden. Note that you need the name located in the HTML nobr tag.
5. You can use a DOM explorer to find the correct names.
   
6. For each field add the following code.

   $('nobr:contains("[Field Name]")').closest('tr').hide(); 
   

7. In my example I hide two fields, Finalized Date and Finalized By. My example code for the document ready function is shown below.

   $(document).ready(function()
      {
         $('nobr:contains("Finalized Date")').closest('tr').hide(); 
         $('nobr:contains("Finalized By")').closest('tr').hide();
      });
   

8. The second step is to make the function that hides or shows the fields depended on the selected value.
9. Add the following code to the JavaScript.

   (function($){
      function showHideRegionLocation() 
      {
         var FeedbackMatchingValue = 'Final';
   
         var thisDiv = $("select[title='Status']"); 
         var mmFieldValue = thisDiv.find("option:selected").text();
   		
         $('nobr:contains("Finalized Date")').closest('tr').hide(); 
         $('nobr:contains("Finalized By")').closest('tr').hide();
   			
         if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
         {
            $('nobr:contains("Finalized Date")').closest('tr').show(); 
            $('nobr:contains("Finalized By")').closest('tr').show();
         } 					
      }
   

10. Set the var FeedbackMatchingValue to the value which will show the hidden fields.
11. Set the var thisDiv to the name of the Field that is used to show/hide the fields. Note that different types are just for different columns example Select or Input.
12. Add the hide and Show codes. The code hides or show the table row (tr).
13. Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.

    $(document).ready(function() {
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });

    })(window.jQuery);

14. Change the value after id^ to the field that contains the value on which field are being shown/hidden.
15. The final code looks like this.

    $(document).ready(function()
       {
          $('nobr:contains("Finalized Date")').closest('tr').hide(); 
          $('nobr:contains("Finalized By")').closest('tr').hide();
    });
    
    (function($){
       function showHideRegionLocation() 
       {
       var FeedbackMatchingValue = 'Final';
       
       var thisDiv = $("select[title='Status']"); 
       var mmFieldValue = thisDiv.find("option:selected").text();
    		
       $('nobr:contains("Finalized Date")').closest('tr').hide(); 
       $('nobr:contains("Finalized By")').closest('tr').hide();
    			
       if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
       {
          $('nobr:contains("Finalized Date")').closest('tr').show(); 
          $('nobr:contains("Finalized By")').closest('tr').show();
       } 	
    }
    
    $(document).ready(function() {
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });	
    })(window.jQuery);
    

JavaScript: Edit Form

1. The edit form is almost completely the same, only the last function is different.
2. Open your favorite JavaScript Editor.
3. Create a new JavaScript file called EditFormHideShow.js
4. Follow the steps 3 – 12 from the chapter JavaScript: New Form.
5. Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.

   $(document).ready(function() {
      setTimeout(function() {
         showHideRegionLocation();
      }, 1000);
      $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
      });	
   })(window.jQuery);
   

6. Change the value after id^ to the field that contains the value on which field are being shown/hidden.
7. The final code looks like this.

   $(document).ready(function()
      {
         $('nobr:contains("Finalized Date")').closest('tr').hide(); 
         $('nobr:contains("Finalized By")').closest('tr').hide();
   });
   
   (function($){
      function showHideRegionLocation() 
      {
      var FeedbackMatchingValue = 'Final';
      
      var thisDiv = $("select[title='Status']"); 
      var mmFieldValue = thisDiv.find("option:selected").text();
   		
      $('nobr:contains("Finalized Date")').closest('tr').hide(); 
      $('nobr:contains("Finalized By")').closest('tr').hide();
   			
      if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
      {
         $('nobr:contains("Finalized Date")').closest('tr').show(); 
         $('nobr:contains("Finalized By")').closest('tr').show();
      } 	
   }

   $(document).ready(function() {
      setTimeout(function() {
         showHideRegionLocation();
      }, 1000);
      $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
      });	
   })(window.jQuery);

Adding JavaScript to a form

1. Open the edit and/or new form of the list.
2. Set the form in edit mode
3. Add the Script Editor Web Part to the page
   
4. Edit the SNIPPET and add the following code.
   

   <script src="../../SiteAssets/System/jquery-3.1.1.min.js" type="text/javascript"></script> 
   <script src="../../SiteAssets/System/EditFormHideShow.js" type="text/javascript"></script>
   

5. Insert the code en Stop editing the form.
6. Save the custom JavaScript HideColumns and the jQuery script in the correct location.
7. The JavaScript will now run and hide or shows the field based on the selected value of the field Status.