Sputility.js on SharePoint 2019 - Unable to submit an item on a list

Question

I have a custom .aspx file built by a different person (long time ago) on SharePoint 2013 where I have jquery-1.11.3.min.js and sputility.js loaded.

It is used to hide and show some fields, and then submit to the SharePoint list.

I have migrated this to SharePoint 2019 by using ShareGate Desktop, and now it doesn't work.

I do see that the hide and show functions from sputility.js do work, but the submit does not. I do not know if this is an issue of SharePoint 2019 not supporting this code or something that I am missing.

    ![CDATA[
    <script src="/Style%20Library/jquery/jquery-1.11.3.min.js"></script>
    <script src="/Style%20Library/jquery/sputility.js"></script><script><script></script>
    <script src="/Style%20Library/jquery/Lozzi.Fields.js"></script><script>
    // wait for the window to load
    $(document).ready(function () {
        // Get a single select dropdown field

        var contractField = SPUtility.GetSPField('Contract Type');
        var panstateField = SPUtility.GetSPField('PAN Type');
        var panstate = getUrlVars()["panstate"];
        // create a function to show or hide City based on Country's value
        var showOrHideField = function() {
            var contractFieldValue = contractField.GetValue();
            // Hide the Agency field if the selected value is Other        
            if((contractFieldValue === 'FTE') || (contractFieldValue === 'PTE')) {
                SPUtility.HideSPField('Agency Name');
                SPUtility.HideSPField('Middle Name');        
            }
            else {
                SPUtility.ShowSPField('Agency Name');
                SPUtility.ShowSPField('Project Name');            
                SPUtility.ShowSPField('Project Matter Code');
                SPUtility.ShowSPField('End Date (Termination)');
                SPUtility.HideSPField('Middle Name');                    
            }

        };

        var showOrHidePANField = function() {
            var panstateFieldValue = panstateField.GetValue();
            // Hide the fields if the selected value are transfer,terminate,rehire.        
            if((panstateFieldValue === 'Extension') || (panstateFieldValue === 'Terminate')) {
                        SPUtility.HideSPField('First Name');
                        SPUtility.HideSPField('Street Address');
                        SPUtility.HideSPField('Middle Name');     
            }
            else if((panstateFieldValue === 'Transfer') || (panstateFieldValue === 'Rehire')) {
                        SPUtility.HideSPField('First Name');
                        SPUtility.HideSPField('Street Address');
                        SPUtility.ShowSPField('Distribution Lists');
                        SPUtility.HideSPField('Middle Name');                    
            }
            else {
                        SPUtility.ShowSPField('First Name');
                        SPUtility.ShowSPField('Street Address');
                        SPUtility.HideSPField('Middle Name');   
            }

        };

        // run at startup (for edit form)
        showOrHideField();

        // run at startup (for edit form)
        showOrHidePANField();

        var HidePANTypeItems = function() {
                var dropdown = $(":input[title='PAN Type Required Field']");
                dropdown.find("option[value='TS-New']").remove();
                dropdown.find("option[value='TS-Terminate']").remove();    

        }

        HidePANTypeItems();

        var DisableStatus = function() {    
                Lozzi.Fields.disable("Status");
        }

        DisableStatus();


        // make sure if the user changes the value we handle it
        $(contractField.Dropdown).on('change', showOrHideField); 

        // make sure if the user changes the value we handle it
        $(panstateField.Dropdown).on('change', showOrHidePANField); 
    });

           $('#ctl00_ctl41_g_55c6f41c_c559_4749_a28b_0f0b0398d962_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem').mouseover(function() {
             var ExistingUser = SPUtility.GetSPField('Existing User').GetValue();
             //alert(ExistingUser[0].DisplayText.split(' ')[0]);
             SPUtility.GetSPField('First Name').SetValue(ExistingUser[0].DisplayText.split(' ')[0]);
             SPUtility.GetSPField('Last Name').SetValue(ExistingUser[0].DisplayText.split(' ')[1]);
          });



    // Read a page's GET URL variables and return them as an associative array.
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

When clicking on the Submit button, it will not do anything. And unfortunately I do not see any error (or I do not know how to debug this correctly).

Things that I did:

1. Confirmed that jquery and sputility are on the style folder.
2. The Hide and Show options on the fields are working.
3. If I do not trigger the hide/show (I do not change the contractFieldvalue), the Submit button works fine.
4. In the past, I had to make a change on this script on the following:

  $('#ctl00_ctl41_g_55c6f41c_c559_4749_a28b_0f0b0398d962_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem')

Where the string between CTL41_ and _ctl00 is the ID of the table. I matched this although I am not sure if it is correct.

I would appreciate any guidance on things to check.

Thanks.

Answer 1

It's most likely related to the button reference. Is there any specific reason for that long reference? Is this is a single SharePoint form?

Otherwise, jQuery-wise to get the reference for that button you could do it like this (and don't have to bother about any nasty id's in the future.

The selector ($) is for looking where a input is ending with the ID diidIOSaveItem.

$("input[id$='diidIOSaveItem']")

Attribute Ends With Selector [name$=”value”]