Hiding and showing fields based on value selected in drop down using Jquery in SharePoint 2013.

Assumptions:

  1. SharePoint list called “Student”.
  2. A Choice field called “Student Type” (drop down) with values as ‘University’ and ‘School’.
  3. Some single line text fields “University”, “School”, “Class”, “Year”.

Steps:

  1. Open the newform.aspx page of a list.\
  2. Edit the page.
  3. Add a new script editor webpart.
  4. Add the below code to the script editor webpart.

  1. <script src="/sites/SiteAssets/jquery-1.10.2.js"></script>
  2. <script src="/sites/SiteAssets/sputility.min.js"></script>
  4. <script language="javascript" type="text/javascript">
  5. $(document).ready(function() {
  7. // Gets the Student type field
  8. var studentType = SPUtility.GetSPField('Student Type');
  10. // creates a function to show or hide University field or School field
  11. var showOrHideField = function() {
  12. var studentTypeValue = studentType.GetValue();
  14. // Hide the City field if the selected value is Other
  15. if (studentTypeValue == 'University’) {
  16. SPUtility.HideSPField('School'); SPUtility.HideSPField('Class');
  17. } else {
  18. SPUtility.ShowSPField('School');
  19. SPUtility.ShowSPField('Class');
  20. }
  21. };
  23. // run at startup (for edit form)
  24. showOrHideField();
  26. // make sure if the user changes the value we handle it
  27. $(tudentType.Dropdown).on('change', showOrHideField);
  28. });
  29. </script>
Explanation:

  1. Reference needs to be made to jquery and SPUtility.js files.
  2. GetSPField(‘<parameter>’): Gets the SharePoint list field.
  3. GetValue(): Gets the selected value from the drop down list.
  4. SPUtility.HideSPField('School'): This will be hiding the fields.
  5. SPUtility.ShowSPField('Class'): This is be showing the fields.