Trouble conditionally hiding fields in SharePoint 2013 custom list

Question

I have a custom list in SP 2013 where I need to conditionally show/hide fields in the list based on responses to other fields in the list. I'm so close to figuring it out, but it's not been easy. I've completed the following steps: 1) Download jquery and sputility files and posted them to the Style Library 2) In the list, click on New Item > Edit page > Added a content editor webpart > Clicked on Edit Source and entered the code below 3) Directed the code to the jquery and sputility files in the Style Library using the appropriate links

I have the following use case: I have an 'Employee Type' field. If the value = Existing Employee, I want to show the Employee Name and Employee ID fields, while hiding the Candidate Name field. If the value = New Hire/Rehire, I want the Employee Name and Employee ID field to hide, while only the Candidate Name shows.

Below is my code. This code isn't working. Can someone please tell me what I'm doing wrong?

Code:

<script src="/sites/compensationagreements/Code/jquery-3.5.1.min.js"></script>
<script src="/sites/compensationagreements/Code/sputility.min.txt"></script>
<script>
 $(document).ready(function(){
 alert('jQuery loaded');
 var employeetype = SPUtility.GetSPField('Employee Type');
 var HideOrShowOthersField=function(){
 var employeeValue = employeetype.GetValue();
 if(employeeValue=='Existing Employee')
 {
 SPUtility.GetSPField('Employee Name').Show();
 SPUtility.GetSPField('Employee ID').Show();
 SPUtility.GetSPField('Candidate Name').Hide();
 }
 else
 {
 SPUtility.GetSPField('Employee Name').Hide();
 SPUtility.GetSPField('Employee ID').Hide();
 SPUtility.GetSPField('Candidate Name').Show();
 }
 };
 HideOrShowOthersField();
 $(employeetype.Dropdown).on('change',HideOrShowOthersField);
 });
</script>

Thank you!

Answer 1

let's make sure that js libraries are loaded. Open dev tools and go to network tab. Refresh the page and see if the libraries will show in the pane below. Paste a print screen of the dev tools network tab output to see what you get. Then we will proceed from there.

Use jquery to show and hide fields. Use this code snippet:

$('td.ms-formlabel:contains("[fied display name]")').parent().hide();

$('td.ms-formlabel:contains("[fied display name]")').parent().show();

Replace [field display name] with your field.

Answer 2

The script works fine based on my testing in my local SharePoint 2013.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="/siteassets/sputility.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var employeetype = SPUtility.GetSPField('Employee Type');
            var showOrHideField = function () {
                var employeeValue = employeetype.GetValue();
                if (employeeValue == 'Existing Employee') {
                    SPUtility.GetSPField('Employee Name').Show();
                    SPUtility.GetSPField('Employee ID').Show();
                    SPUtility.GetSPField('Candidate Name').Hide();
                }
                else {
                    SPUtility.GetSPField('Employee Name').Hide();
                    SPUtility.GetSPField('Employee ID').Hide();
                    SPUtility.GetSPField('Candidate Name').Show();
                }
            }

            // run at startup (for edit form)
            showOrHideField();
            // make sure if the user changes the value we handle it
            $(employeetype.Dropdown).on('change', showOrHideField);

        });
    </script>