In previous tutorial we have learnt 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 selection of other 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 user selects ‘Other’ in Country field with Content Editor Webpart i.e. CEWP. Here Country field is drop down. This method is also applicable for other field types. Lets see how to hide one field based on other 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 screenshot.
Step 3: Click on Add a Web Part > Media and Content >Content Editor > Add.
Step 4: Click on Edit Source
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/mayureshjoshi96yahoocom/Style%20Library/jquery.min.js"></script><script src="/sites/mayureshjoshi96yahoocom/Style%20Library/sputility.min.js"></script><script>
var country = SPUtility.GetSPField('Country');
var countryValue = country.GetValue();
Step 7: Replace Red colored link with uploaded links. See below screenshots. Do it for both JQuery and SPUtility.min.js)
Step 8: Click on stop editing
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 Appears.
I hope you liked this article. Please share it with your friends and Like our Facebook page for future updates.