0

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!

5
  • Are you sure the jQuery and SPUtitlity files are getting loaded? You say you put them in the Style Library, but the src URLs do not reflect that. Try putting alert('jQuery loaded'); as the very first line inside the $(document).ready() function. May 21, 2020 at 14:46
  • Thank you, Dylan! I've updated my code in my original post above, but still not working. Any other suggestions? May 21, 2020 at 18:24
  • For some reason it's truncating my code when editing my post above and too long to post in comments. But my first lines are: <script src="/sites/compensationagreements/Code/jquery-3.5.1.min.js"></script><script src="/sites/compensationagreements/Code/sputility.min.txt"></script><script> May 21, 2020 at 18:28
  • I put the jQuery and SPUtility files in a document library and repasted the links in the code. Once saving, it seems to truncate the links to reflect the above. May 21, 2020 at 18:29
  • if the SPUtility file is a javascript file, shouldn't it be named (in the document library as well as in the script tag src url) sputility.min.js and not .txt? May 21, 2020 at 18:55

2 Answers 2

0

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.

0

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>

Your Answer

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

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