How to pass or return value from a SharePoint 2013 Modal Popup Dialog to the Base Page

This article shows you how to return, pass back data from a popup modal dialog in SharePoint 2013 to the calling page. This is a three-step process. The first step is to invoke a pop up with call back option. (To learn more about call back in popup check out my previous article). The next step is to bind the data that has to be passed on to the base page in the commit operation of popup page. The third step is to handling the data in the call back operation.

Script for Opening a Popup and handling the Popup data

 <script type="text/javascript">
     //******** Dialog with Data from Pop Up Starts Here ***********/
     function openDialogAndReceiveData(tUrl, tTitle) {
         var options = {
             url: tUrl,
             title: tTitle,
             dialogReturnValueCallback: onPopUpCloseCallBackWithData
         };
         SP.UI.ModalDialog.showModalDialog(options);
     }
 
     function onPopUpCloseCallBackWithData(result, returnValue) {
         if(result== SP.UI.DialogResult.OK)
         { 
             SP.UI.Status.removeAllStatus(true);
             var sId = SP.UI.Status.addStatus("Data successfully populated to text boxes from Pop-up");
             SP.UI.Status.setStatusPriColor(sId, 'green');
             document.getElementById('<%= txtData1.ClientID %>').value = returnValue[0];
             document.getElementById('<%= txtData2.ClientID %>').value = returnValue[1];
         }else if(result== SP.UI.DialogResult.cancel)
         {
             SP.UI.Status.removeAllStatus(true);
             var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
             SP.UI.Status.setStatusPriColor(sId, 'yellow');
         }
     }
     //******** Dialog with Data from Pop Up Ends Here ***********/
 </script>

Script in Popup Page

Script for Passing the Value from Popup

 <script type="text/javascript">
     function closePopupAndPassData() {
         var popData = [];
         popData[0] = document.getElementById('<%= txtPopData1.ClientID %>').value;
         popData[1] = document.getElementById('<%= txtPopData2.ClientID %>').value;
         SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);
     }
 </script>

Passing the value

 <input id="btnClientOk2" type="button" value="Client Side OK and pass Value to Base Page" onclick="closePopupAndPassData()" />