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!

  • 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. – Dylan Cristy May 21 at 14:46
  • Thank you, Dylan! I've updated my code in my original post above, but still not working. Any other suggestions? – Kristin Edwards May 21 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> – Kristin Edwards May 21 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. – Kristin Edwards May 21 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? – Dylan Cristy May 21 at 18:55
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.

| improve this answer | |
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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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