Show Hide Fields Based on Dropdown Selection in Sharepoint

Today we are going to learn how to Show/Hide fields based on the Dropdown 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 the Country field with the Content Editor Web part i.e. CEWP. Here the Country field is a drop-down. This method is also applicable to 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 the Edit Page option as shown in the screenshot.

edit page in sharepoint

 

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

Add content editor

Step 4: Click on Edit Source

Click on edit source

Step 5: Download jquery.min and sputility.min and upload it to 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)
Copy link

Step 8: Click on stop editing

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 Appear.

Hide fields

Show Hidden fields

If you like this article, please share it with your friends and like our 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!

Post a Comment

0 Comments