Hide Fields and Columns on SharePoint List form [duplicate]

Question

I have a situation where I want to show/hide my SharePoint list column / Fields in a list form based on the value of some other field on the form.

Example :

I have 2 dropdowns say "IssueType", "Level" and a TextBox, I want that my TextBox should be visible only when value from dropdowns are "Error" and "High" respectively.

How can I achieve this in the form?

I am OK with using JS, CSR or any other option available as this is for my own learning purpose.

Answer 1

possible duplicate of this question

You can achieve this via SPUtility.Js as stated in the answer posted in the link.

With that you can write the script as follow

​

<script src="/Shared%20Documents/jquery-1.10.2.min.js"></script>
<script src="/Shared%20Documents/sputility.min.js"></script>

<script>
// wait for the window to load
$(document).ready(function () {
    // Get a single select dropdown field
    var IssueTypeField= SPUtility.GetSPField('Issue');
    var LevelField= SPUtility.GetSPField('Level');

    // create a function to show or hide City based on Issue's value
    var showOrHideField = function() {
        var IssueTypeFieldValue = IssueTypeField.GetValue();
        var LevelFieldValue = LevelField.GetValue();
        // Hide the Textbox if the selected values match
        if(IssueTypeFieldValue == 'Error' && LevelFieldValue == 'High' ) {
            SPUtility.ShowSPField(TextBoxFieldName);
        }
        else {
            SPUtility.HideSPField(TextBoxFieldName);
        }
    };

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

    // make sure if the user changes the value we handle it
    $(countryField.Dropdown).on('change', showOrHideField);
});
</script>