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

1. Navigate to the Child list.
2. Click on the new item link.
   
   
   
   
3. In the top-right corner click on the settings button and then click on the Edit page link.
   
   
   
   
4. Click on the Add a Web Part link.
   
   
   
   
5. 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.
   
   
   
   
6. Click on the Edit Snippet link.
   
   
   
   
7. Paste in the following code snippet and then click on the Insert button.
   
   1. <script language="javascript" type="text/javascript" src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>
   2. <script language="ecmascript" type="text/ecmascript">
   3. var collListItem;
   4. $(document).ready(function () {
   5. var empIDField = $("input[title='Employee Id']");
   6. empIDField.change(function () {
   7. getSetListItem()
   9. function getSetListItem() {
   10. var empID = $("input[title='Employee Id']").val();
   11. var clientContext = new SP.ClientContext.get_current();
   12. var oList = clientContext.get_web().get_lists().getByTitle('Parent');
   13. var camlQuery = new SP.CamlQuery();
   14. camlQuery.set_viewXml('
   15. <View>
   16. <Query>
   17. <Where>
   18. <Eq>
   19. <FieldRef Name=\'EmployeeId\' />
   20. <Value Type=\'Text\'>' + empID + '</Value>
   21. </Eq>
   22. </Where>
   23. </Query>
   24. <RowLimit>10</RowLimit>
   25. </View>');
   26. collListItem = oList.getItems(camlQuery);
   27. clientContext.load(collListItem);
   28. clientContext.executeQueryAsync(Function.createDelegate(this, OnLoadSuccess),
   29. Function.createDelegate(this, OnLoadFailed));
   30. }
   32. function OnLoadSuccess(sender, args) {
   33. var listItemEnumerator = collListItem.getEnumerator();
   34. while (listItemEnumerator.moveNext()) {
   35. var oListItem = listItemEnumerator.get_current();
   36. $("input[title='First Name']").val(oListItem.get_item("FirstName"))
   37. $("input[title='Last Name']").val(oListItem.get_item("LastName"))
   38. }
   39. }
   41. function OnLoadFailed(sender, args) {
   42. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
   43. }
   44. });
   45. });
   47. </script>
       
8. Click on the Page tab in the ribbon interface and then click on the Stop Editing button.
   
   
   

Testing

1. Navigate to the Child list.
2. Click on the new item link.
3. Enter the Employee Id value and you will to see the values automatically populated from the Parent list as shown below.
   
   
   

Summary

Thus in this article you saw how to auto-populate the field values based on text change in SharePoint 2013 list forms.