ModalPopup data passed to Javascript

I have a ModalPopupExtender embedded in a gridview - all inside an UpdatePanel as follows:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

  <asp:GridView ID="gvGrid01"
     <asp:TemplateField ShowHeader="False">
  <ItemTemplate>
          <asp:Button ID="HiddenForMPE1" runat="server" Text="Button" Style="display: none" />      
          <asp:ModalPopupExtender ID="MPE1" runat="server" TargetControlId="HiddenForMPE1" PopupControlID="PanCheckOut"   
            CancelControlId = "btnChkOutCancel" DropShadow="true" PopupDragHandleControlID="PanCheckOut"
            BackgroundCssClass="mymodalBackground"  />
 
          <asp:Panel ID="PanCheckOut" runat="server" Visible="True" Height="450px" Width="750px" BorderStyle="Solid"           CssClass="modalPopup" Style="display: none;">

         <asp:TextBox ID="txtPurpose" runat="server" TextMode="MultiLine" Height="180" Width="650"></asp:TextBox>
  
         <asp:Button ID="btnChkOut" runat="server" Text="Check Out" ForeColor="Blue" CommandName="CHKOUT"
               OnClientClick="return ValidateCkOutPanel();" OnClick="btnChkOut_Click"/>

When the user enters data on the modal popup and click the btnChkOut - I want to execute some javascript using the OnClientClick to edit the user input.
Problem is - I cannot get my panel data fields passed to the javascript. I have textbox (sample shown here), label and checkbox fields to pass and validate but all references are null in the javascript.

Here is my java script with the textbox example.  Any help would be appreciated.

function ValidateCkOutPanel()
{
  var ckPurp = document.getElementById('<%= txtPurpose.ClientID %>');
  alert(ckPurp); - is always null ??
}