How do I assign a value to textbox when I click on a row in obout grid?

I'm working on about grid and when I click on a row of it the text box controls in a panel under the grid have to fill with the selected row values. I'm doing this on the client side and using onClientSelect property of grid view. I'm getting the values when I click on the row but couldn't assign them to controls. Please look the code and let me know

<%@ Register Assembly="obout_Grid_NET" Namespace="Obout.Grid" TagPrefix="cc1" %>
<%@ Register Assembly="obout_Interface" Namespace="Obout.Interface" TagPrefix="cc2" %>
<%@ Register TagPrefix="igg" Namespace="HR" Assembly="HR" %>



<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <script type="text/javascript">
     function OnRecordFillPanel(arrSelectedRecords) {
         for (var i = 0; i < arrSelectedRecords.length; i++) {
             var record = arrSelectedRecords[i];
             $("#ernType").text = record.EARNCDE;//**problem comes here cannot assign value to textbox.**

         }

}
function addNewRec() {
    $('#ernType').val('');//**and also cannot clear the value here**
}
  </script>

 <div >
 <div>
 <ISS:ISSOGrid ID="grd_EarningCodeTable" runat="server" Width="100%" OnClientSelect="OnRecordFillPanel" 
 AllowMultiRecordSelection="false" AutoGenerateColumns="false">  
  <Columns>
  <cc1:Column ID="col_ErnType" DataField="EARNCDE" HeaderText="Earning Code" runat="server"
              HeaderAlign="Left" Align="Left" Width="20%" />
  <cc1:Column ID="col_Desc" DataField="DESCRIPTION" HeaderText="Description" runat="server"
              HeaderAlign="Left" Align="Left" Width="25%" />

   </ISS:ISSOGrid>
   </div>

    <div>
    <asp:Panel ID="pnl_details" runat="server" Height="214px">
    <div id="Div1" class = "showdetails" visible = "true" runat ="server" style="padding : 20px;">

      <div style ="padding: 6px; width: 882px;">
          <label>Earnings Type:&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <asp:TextBox ID = "ernType"  runat ="server"></asp:TextBox>
      </div>
       <div style ="padding: 6px; width: 467px;">
          <label>Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <asp:TextBox ID = "desc" runat ="server" Width="300px"></asp:TextBox>
      </div>

      <div style ="padding: 6px;">

              <asp:Button ID="btn_new" runat="server" Text="New" OnClientClick="javascript:addNewRec();" />
          </asp:Panel>
      </div>

      </div>
    </asp:Panel>
    </div>
    </div>


</asp:Content>

Solution

Your issue is that you are using an id in the way you want to be using a class. I am assuming that arrSelectedRecords has multiple entries which is why you use the for loop, and that looks like it may be the reason this is failing.

There should only be 1 unique ID per webpage!

 for (var i = 0; i < arrSelectedRecords.length; i++) {
     var record = arrSelectedRecords[i];
     $(".ernType").val(record.EARNCDE);//**problem comes here cannot assign value to textbox.**

 }

above is how the for loop should look. I may be wrong in interpreting your question, but I believe that may be the issue. So you will have to change everything that has id="ernType" to class="ernType".

Although, I am 90% guessing here what you want. It would be helpful if you would provide some more information.