jsomautopopulate

Title: Auto Populate the data

Description: We have requirement that. Data need to display in  text box based on other text box.

I have enter the Employee ID in one  text box and need to populate the Employee name in other text box.



Exepected OutPut:

 


Steps:
Create Sharepont List called EmployeeDetails and create 2 columns EmployeeID and EmployeeName under that list.




Code:

1. <script type="text/javascript" src="/_layouts/15/init.js"></script>  
2. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
3. <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
4. <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>  
5. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
6. <script lang="javascript" type="text/javascript">  
7.     
8. $(document).ready(function ()  
9.     {  
10.       
11.     $('#employeeIDTxtbox').on('blur', function() {  
12.            
13.         Dislaybind();  
14.     });   
15.   
16. });  
17.   
18.   
19.   
20. function Dislaybind()  
21. {  
22.   
23.    var clientContext = new SP.ClientContext();  
24.    var oList = clientContext.get_web().get_lists().getByTitle('EmployeeDetails');  
25.    var camlQuery = new SP.CamlQuery();  
26.    var employeeID = $("#employeeIDTxtbox").val();  
27.    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'EmployeeID\'/>' +  
28.         '<Value Type=\'Text\'>'+ employeeID +'</Value></Eq></Where></Query></View>');  
29.   
30.    this.collListItem = oList.getItems(camlQuery);  
31.    clientContext.load(collListItem);  
32.    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededDisplay),  
33.    Function.createDelegate(this, this.onQueryFailedDisplay)  
34.   
35.     );  
36.   
37.   
38. }  
39.   
40.   
41. function onQuerySucceededDisplay(sender, args)   
42.   
43. {  
44.   
45.     var listItemInfo = '';  
46.     var listItemEnumerator = collListItem.getEnumerator();  
47.     while (listItemEnumerator.moveNext())   
48.       {  
49.         var oListItem = listItemEnumerator.get_current();  
50.         $('#employeeIDTxtbox').val(oListItem.get_item('EmployeeID'))  
51.         $('#employeeNameTxtbox').val(oListItem.get_item('EmployeeName'))  
52.     
53.   
54.       }  
55.   
56. }  
57.   
58. function onQueryFailedDisplay(sender, args)   
59.   
60. {  
61.   
62.     alert('Request failed. ' + args.get_message() +  
63.   
64.     '\n' + args.get_stackTrace());  
65.   
66. }  
67.   
68.   
69. </script>  
70.   
71.   
72.   
73. Employee ID  <input type="text" id="employeeIDTxtbox" /> <br/>  
74. Employee Name  <input type="text" id="employeeNameTxtbox"/>  
75.