Auto-Populate the Field Values Based on Text Change in SharePoint Online List Forms

Introduction

In this article you will see how to auto-populate the field values based on text change in SharePoint Online list forms. I have created a parent list that has the following columns and values.

I have also created a child list that has the following columns.


When the user enters the Employee Id value into the Child list form it should query the values from the Parent list and populate the “First Name” and “Last Name” as shown below.


Procedure to add the client script on list New Form

  • Navigate to the Child list.

  • Click on the new item link.


  • In the top-right corner click on the settings button and then click on the Edit page link.


  • Click on the Add a Web Part link.


  • Click on the Media and Content link in the Categories section, click on the Script Editor web part and then click on the Add button.


  • Click on the Edit Snippet link.


  • Paste in the following code snippet and then click on the Insert button.

<script language="javascript" type="text/javascript" src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>  

<script language="ecmascript" type="text/ecmascript">  

var collListItem;  $(document).ready(function ()