Show Hide Fields Based on Dropdown Selection: Sharepoint 2013

In the previous tutorial, we have learned How to Create List and Libraries in SharePoint 2013. Today we are going to learn how to Show/Hide fields based on Drop down selection in SharePoint 2013, which is also implemented in Nintex Form with Rules. This is useful when we need to show or hide some fields depend on the selection of another field (column).

How to Show/Hide Column Fields Based on Other Fields

In this tutorial we are going to hide ‘State’ and ‘City’ fields when the user selects ‘Other’ in Country field with Content Editor Web part i.e. CEWP. Here Country field is drop-down. This method is also applicable for other field types. Let’s see how to hide one field based on another field.

Step 1: Create a new list and insert all the fields in it.

Step 2: Open the new item form and click on Edit Page option as shown in the screenshot.

Image may be NSFW.
Clik here to view.

Step 3: Click on Add a Web Part > Media and Content >Content Editor > Add.

Image may be NSFW.
Clik here to view.

Step 4: Click on Edit Source

Image may be NSFW.
Clik here to view.

Step 5: Download jquery.min and sputility.min and upload it in your Document library.

Step 6: Paste this code in that Edit source section.

<script src="/sites/abc/Style%20Library/jquery.min.js"></script>
<script src="/sites/abc/Style%20Library/sputility.min.js"></script>
<script>
 $(document).ready(function(){
 var country = SPUtility.GetSPField('Country');
 var HideOrShowOthersField=function(){
 var countryValue = country.GetValue();
 if(countryValue=='Other')
 {
 SPUtility.GetSPField('State').Hide();
 SPUtility.GetSPField('City').Hide();
 }
 else
 {
 SPUtility.GetSPField('State').Show();
 SPUtility.GetSPField('City').Show();
 }
 };
 HideOrShowOthersField();
 $(country.Dropdown).on('change',HideOrShowOthersField);
 });
</script>

Step 7: Replace Red colored link with uploaded links. See below screenshots. Do it for both JQuery and SPUtility.min.js)
Image may be NSFW.
Clik here to view.

Step 8: Click on stop editing

Image may be NSFW.
Clik here to view.

Here is the result. Now you can see When we choose Other in Country field State and City is hidden. When we choose India in Country State and Country fields Appear.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

If you like this article, please share it with your friends and like or facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

The post Show Hide Fields Based on Dropdown Selection: Sharepoint 2013 appeared first on MyClassBook.