Read SharePoint 2010 List Items using Client Object Model when DropDownList changed

As per my requirement I have to populate ‘Branch’ text box value automatically when ‘protocol’ dropdownlist  select index changed in a SharePoint 2010 List.

 For this we have a workaround like this.

1)      Attach onchange event to the dropdownlist dynamically

2)      Read SharePoint  control (here dropdownlist)

3)     Read SharePoint list item (Branch value) based on dropdownlist ‘Protocol’  value by using Clinet Object Model

auto population branch field

reading  Branches from this list

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

 

 add below code here or add content editor webpart to newform and editform page

<script type="text/javascript">

           _spBodyOnLoadFunctionNames.push("SetDropDownEvent");

           var ddlProtocol;

           function SetDropDownEvent() {

               getField('select', 'Protocol').onchange = function () { GetProtocol() };

               //alert('SetDropDownEvent');

           }

           function getField(fieldType, fieldTitle) {

               var docTags = document.getElementsByTagName(fieldType);

               //alert(docTags.length);

               for (var i = 0; i < docTags.length; i++) {

                   if (docTags[i].title == fieldTitle) {

                       return docTags[i]

                   }

               }

           }

           function GetProtocol() {

               //alert('syncDropDowns');

               lookupField = getField('select', 'Protocol');

               lookupSelectedItem = lookupField.options[lookupField.selectedIndex];

               // alert('lookupSelectedItem' + lookupSelectedItem.text);

               ddlProtocol = lookupSelectedItem.text;

               alert('ddlProtocol' + ddlProtocol);

               GetBranchByProtocol(lookupSelectedItem.text);

           }

           //  ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

           function GetBranchByProtocol(protocolid) {

               // alert('protocolid' + protocolid);

               var clientContext = new SP.ClientContext.get_current();

               var oList = clientContext.get_web().get_lists().getByTitle('TestList');

               var camlQuery = new SP.CamlQuery();

               camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ProtocolNew\' /><Value Type=\'Text\'>' + protocolid + '</Value></Eq></Where></Query></View>');

               this.collListItem = oList.getItems(camlQuery);

               clientContext.load(collListItem);

               clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

           }

           function onQuerySucceeded(sender, args) {

               var listItemInfo = '';

               var listItemEnumerator = collListItem.getEnumerator();

               while (listItemEnumerator.moveNext()) {

                   var oListItem = listItemEnumerator.get_current();

                   if (ddlProtocol) {

                       branchField = getField('input', 'Branch');

                       // alert('branchField' + branchField.id);

                       document.getElementById(branchField.id).value = oListItem.get_item('Title')

                       // alert('branchvalue' + document.getElementById(branchField.id).value);

                   } else {

                       alert('else');

                       branchField = getField('input', 'Branch');

                       // alert('branchField' + branchField.id);

                       document.getElementById(branchField.id).value = '';

                   }

                   //break

               }

           }

           function onQueryFailed(sender, args) {

               alert('fail');

               alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

           }

    

     </script>