Hiding and Showing Fields Based on Value Selected in Drop Down using JQuery in SharePoint 2013

In this blog we will learn how to Hide or show some fields based on value selected in drop down using jquery in SharePoint 2013.

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.

<script src="/sites/SiteAssets/jquery-1.10.2.js"></script>
<script src="/sites/SiteAssets/sputility.min.js"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {

        // Gets the Student type field
        var studentType = SPUtility.GetSPField('Student Type');

        // creates a function to show or hide University field or School field
        var showOrHideField = function() {
            var studentTypeValue = studentType.GetValue();

            // Hide the City field if the selected value is Other
            if (studentTypeValue == 'University’) {
                SPUtility.HideSPField('School'); SPUtility.HideSPField('Class');
            } else {
                SPUtility.ShowSPField('School');
                SPUtility.ShowSPField('Class');
            }
        };

        // run at startup (for edit form)
        showOrHideField();

        // make sure if the user changes the value we handle it
        $(tudentType.Dropdown).on('change', showOrHideField);
    });
</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.