With SharePoint we utilise a lot of lists and libraries to store and share information, nosotros add and change this information with the help of forms. In most cases we create ane form with all the data 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 condition. With the help of jQuery and JavaScript we can create a more dynamic form that volition hide/bear witness fields based on selected values of fields. Brand certain to disable the quick option, otherwise user will be able to edit the field exterior of the provided solution.

SharePoint 2013/Online: Disable Quick edit

  1. Open up the listing 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. Ready Datasheet to No

JavaScript: New Form

  1. Open your favorite JavaScript Editor.
  2. Create a new JavaScript file called NewFormHideShow.js
  3. Add together the following base code to the JavaScript file.
    $(                      document                      ).ready(function() {     } );
  4. The first step is to hide the columns. Find the brandish names of the field that need to exist subconscious. Note that you need the proper name located in the HTML nobr tag.
  5. Y'all tin can apply a DOM explorer to find the correct names.
  6. For each field add together the post-obit code. 
    $('nobr:contains("[Field Proper noun]")').closest('tr').hide();
  7. In my instance I hide two fields, Finalized Date and Finalized Past. My example code for the document ready office is shown below. 
    $(document).ready(office()    {       $('nobr:contains("Finalized Engagement")').closest('tr').hide();        $('nobr:contains("Finalized By")').closest('tr').hibernate();    });
  8. The second step is to brand the function that hides or shows the fields depended on the selected value.
  9. Add the post-obit code to the JavaScript. 
    (function($){                      function                      showHideRegionLocation()     {                      var                      FeedbackMatchingValue =                      'Terminal';                      var                      thisDiv = $("select[title='Status']");                      var                      mmFieldValue = thisDiv.discover("pick:selected").text(); 		       $('nobr:contains("Finalized Date")').closest('tr').hide();        $('nobr:contains("Finalized Past")').closest('tr').hibernate();                      if                      (mmFieldValue.indexOf(FeedbackMatchingValue) > -1)        {          $('nobr:contains("Finalized Date")').closest('tr').evidence();           $('nobr:contains("Finalized By")').closest('tr').show();       } 					    }
  10. Set the var FeedbackMatchingValue to the value which will prove the hidden fields.
  11. Set up the var thisDiv to the proper 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 last part to the code. This part makes sure the functions runs when a users selects and/or reselects the choice. 
    $(certificate).set(function() {    $("select[id^='Condition'").on('mistiness', showHideRegionLocation).on('modify', showHideRegionLocation);    });
    })(window.jQuery);
  14. Alter the value subsequently id^ to the field that contains the value on which field are being shown/hidden.
  15. The final code looks like this. 
    $(document).ready(role()    {       $('nobr:contains("Finalized Appointment")').closest('tr').hide();        $('nobr:contains("Finalized Past")').closest('tr').hibernate(); });  (function($){                      office                      showHideRegionLocation()     {                      var                      FeedbackMatchingValue =                      'Final';                      var                      thisDiv = $("select[championship='Condition']");                      var                      mmFieldValue = thisDiv.find("selection: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').bear witness();    } 	 }  $(certificate).fix(function() {    $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);    });	 })(window.jQuery);

JavaScript: Edit Form

  1. The edit form is virtually completely the same, but the last function is different.
  2. Open your favorite JavaScript Editor.
  3. Create a new JavaScript file chosen EditFormHideShow.js
  4. Follow the steps 3 – 12 from the chapterJavaScript: New Form.
  5. Add the final function to the code. This part makes certain the functions runs when a users selects and/or reselects the option. 
    $(certificate).ready(function() {    setTimeout(function() {       showHideRegionLocation();    },                      m);    $("select[id^='Status'").on('mistiness', 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 terminal code looks similar this. 
    $(document).ready(office()    {       $('nobr:contains("Finalized Appointment")').closest('tr').hibernate();        $('nobr:contains("Finalized By")').closest('tr').hibernate(); });  (role($){                      function                      showHideRegionLocation()     {                      var                      FeedbackMatchingValue =                      'Concluding';                      var                      thisDiv = $("select[title='Condition']");                      var                      mmFieldValue = thisDiv.find("choice:selected").text(); 		    $('nobr:contains("Finalized Engagement")').closest('tr').hide();     $('nobr:contains("Finalized By")').closest('tr').hibernate();                      if                      (mmFieldValue.indexOf(FeedbackMatchingValue) > -1)     {       $('nobr:contains("Finalized Engagement")').closest('tr').show();        $('nobr:contains("Finalized By")').closest('tr').show();    } 	 }
    $(document).set(role() {    setTimeout(part() {       showHideRegionLocation();    },                      grand);    $("select[id^='Condition'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);    });	 })(window.jQuery);

Calculation JavaScript to a class

  1. Open the edit and/or new form of the list.
  2. Set the form in edit mode
  3. Add together the Script Editor Web Office to the folio
  4. Edit the SNIPPET and add the post-obit lawmaking.
                          <script                                            src=                      "../../SiteAssets/Organization/jquery-3.1.i.min.js"                      type=                      "text/javascript"                      ></script>                      <script                                            src=                      "../../SiteAssets/System/EditFormHideShow.js"                      type=                      "text/javascript"                      ></script>
  5. Insert the code en Stop editing the class.
  6. Relieve the custom JavaScript HideColumns and the jQuery script in the correct location.
  7. The JavaScript volition now run and hide or shows the field based on the selected value of the field Status.