Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
1.9k views
in SharePoint by 1 1 1
edited by

I have a list with 53 inputs/columns....need an 'If/Then' type code that will show the bottom 32 inputs when the user makes a specific choice in an upper column. 

I've been looking at Show Hide fields based on dropdown selection SharePoint 2013 / 2016 But can't quite see exactly what I need.  Using the noted JS I could, I think, reiterate the if/then for each of the first choices and then each of the 32 columns -- when to show and when to hide. 

Which would result in an incredibly long and confusing code. (I'll admit - any code is a bit confusing for me). 

But if I can get a code that says - if you choose xxx in this column, then the 32 bottom columns will appear for you to fill in. Otherwise, only the top 21 will show. 


1 Answer

1 like 0 dislike
by 54 119 241

Show and Hide multiple columns based on selections in SharePoint 2016

I agree with you, the code mentioned in my blog is suitable for a limited number of columns. otherwise, you will get multiple if/else conditions with a long code.

So In such cases, I would suggest editing your new form with SharePoint Designer then try to do the following:

Steps

  • Open your list using SharePoint Designer.
  • Click On forms,

    Forms in SharePoint Designer

  • From the above ribbon, Click on a new form.

    create a new form in SharePoint Designer

  • Specify the form name and set it to default.

    New Form in SharePoint Designer

  • Edit your form in Advanced mode.

    Edit file in Advanced mode

  • Search for each field you would like to show or hide.
  • Set its main row to a specific class name like "hide".

show and hide Field in SharePoint List using SharePoint Designer

  • Save the changes to the new form.
  • Open your list in browser, and click on add new Item.
  • Edit your page in the browser.
  • Add Script Editor.
  • Add the below code with your entries.

JS Code

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> 
<script type = "text/javascript">
    
   $(document).ready(function() {
    //Show/hide columns based on Drop Down Selection
    $("select[title='Choice']").change(function() {
        if ($("select[title='Choice']").val() != "Choice 2") {
            hide();
        } else {
            show();
        }
    });
});

function hide() {
    var cols = document.getElementsByClassName("hide");
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = 'none';
    }
}

function show() {
    var cols = document.getElementsByClassName("hide");
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = '';
    }
}
</script>

Output
Show and Hide multiple columns based on selections in SharePoint 2016


See Also

by 1 1 1
0 0
Thanks - but I am not "allowed" access to designer.  Anything I do must be done OOB.
by 54 119 241
0 0
Unfrothuantly, No!
If you don’t ask, the answer is always NO!
...