1

I am using a SharePoint list in which we are using multiple columns covering different process steps to be filled based on a dropdown selection.

The steps are different depending on the mission selection. I want to be able to show/hide fields column depending on the dropdown selection of the mission.

I have added a code here as an example to showcase what I need to do based on the following:
The mission selection column is called 'Selection' and includes dropdown options: 'Yellow', 'Orange', 'Red', 'Green'.

I worked the code on the following columns: 'Country', 'Animal', 'Fruit', and 'Colour'. However, the code is not working at all. I don't have experience in coding so obviously something is not working out but I am not able to detect the issue, so highly appreciate your support to provide any leads on this.

<script src="/SiteAssets/jquery-3.3.1.js"> </script>
<script src="/SiteAssets/sputility.js"> </script>

<script>
  $(document).ready(function () {
    //Show/hide columns based on Drop Down Selection
    $("select[title='Selection']").change(function () {
      var ddlValue = SPUtility.GetSPField('Selection').GetValue();
      if (ddlValue == 'Yellow') {
        SPUtility.ShowSPField('Country');
        SPUtility.ShowSPField('Colour');
        SPUtility.HideSPField('Animal');
        SPUtility.HideSPField('Fruit');
      }

      if (ddlValue == 'Orange') {
        SPUtility.ShowSPField('Fruit');
        SPUtility.ShowSPField('Colour');
        SPUtility.HideSPField('Country');
        SPUtility.HideSPField('Animal');
      }
      if (ddlValue == 'Red') {
        SPUtility.ShowSPField('Animal');
        SPUtility.HideSPField('Country');
        SPUtility.HideSPField('Fruit');
        SPUtility.HideSPField('Colour');
      }

      if (ddlValue == 'Green') {
        SPUtility.ShowSPField('Colour');
        SPUtility.ShowSPField('Animal');
        SPUtility.HideSPField('Country');
        SPUtility.HideSPField('Fruit');
      }
    });
  });
</script>
9
  • Are you getting any error in browser's console? jQuery and SPUtility files loaded properly on page? Commented Dec 14, 2020 at 11:09
  • Can you please ensure the jQuery and SPutlility CDN files are loaded(Update the CDN files path if any issues) Commented Dec 14, 2020 at 12:13
  • 1
    if your site url is like: https://tenant.sharepoint.com/sites/Mysite/siteassets/... then try referencing file like: /sites/Mysite/siteassets/jquery-3.3.1.js. if that doesn't work then try adding complete file URL. You can ensure the files are loaded or not under Sources tab in browser's developer tools. Also, if file is not loaded you will get 404 error in browser's console. Commented Dec 14, 2020 at 13:19
  • 1
    @GaneshSanap, I just tried few things and it worked :) Thanks very much for your support! Commented Dec 14, 2020 at 23:24
  • 1
    Will do; just as a note for future reference and to complete this thread, I also added ')}' at the end of this script as the end of input was incorrect Commented Dec 16, 2020 at 9:43

1 Answer 1

0

Your code looks good to me. I thinks there is some issue with the jQuery and SPUtility files you referenced in your code.

Make sure jQuery and SPUtility files are loaded properly on NewForm.aspx page?

If your file URL is like: https://tenant.sharepoint.com/sites/Mysite/siteassets/jquery-3.3.1.js then try referencing file like: /sites/Mysite/siteassets/jquery-3.3.1.js.

If that doesn't work for you then try adding complete file URL.

You can ensure the files are loaded or not under Sources tab in browser's developer tools. Also, if file is not loaded you will get 404 error in browser's console.

Also make sure that you are not loading jQuery files multiple times on the same page else it will conflict with the different versions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.