SharePoint Online: How to Set Value and Disable a Field in List New Form?

Requirement: Disable a Field in SharePoint Online List New Form (NewForm.aspx).

How to Set Value and Disable a Field in New Form?

I had to fill a few field values from the URL query string and disable those fields in SharePoint Online New Form. My URL for New form would like: https://crescent.sharepoint.com/lists/ack/NewForm.aspx?ID=1&DeviceType=Monitor

sharepoint online disable fields in list forms

Place this script in the Script editor web part:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(getData, "sp.js");

//Change Save button text to "Acknowledge"
$("input[value$='Save']").attr('value', "Acknowledge");  
});

function getData()
{
   //Get values from query string
   var ItemID = GetParameterValues('ID');
   var deviceType = GetParameterValues('devicetype');
 
   //Set value for ID field and disable
   if(ItemID)
   {
      //set the value of Asset Item ID
      $("input[title='Asset Item ID']").val(ItemID);
      //disable Field
      $("input[title='Asset Item ID']").prop("disabled", true);  
   }

   //Set value for device type field and disable it
   if(deviceType)
   {
      deviceType = unescape(deviceType);
      //set the value of Asset Item ID
      $("input[title='Device Type']").val(deviceType);
      //disable Field
      $("input[title='Device Type']").prop("disabled", true);
    }
}

//Function to get value from query string parameters
function GetParameterValues(param) {
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < url.length; i++) {
        var urlparam = url[i].split('=');
        if (urlparam[0] == param) {
            return urlparam[1];
        }
    }
}
//Enable the fields during "PreSaveAction" otherwise, their values will not get saved!
function PreSaveAction()
{
    $("input[title='Asset Item ID']").removeAttr('disabled');
    $("input[title='Device Type']").removeAttr('disabled');
    return true;
}
</script>

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

One thought on “SharePoint Online: How to Set Value and Disable a Field in List New Form?

  • June 6, 2021 at 10:49 PM

    How did you inject the script editor webpart in Sharepoint online OOTB list page

    Reply

Leave a Reply