Question

I have got two sections with billing and delivery address within a datalist:

 <asp:DataList ID="dldirectory" runat="server" Width="100%" 
    RepeatColumns="1" EnableViewState="False" DataKeyField="Id" >
    <ItemTemplate>

                         <asp:TextBox ID="txtBillingAddress" runat="server" Text='<%# Eval("BillingFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>

                        <asp:CheckBox ID="chkCopy" runat="server" Text="Same as Billing Address." />

                         Address:
                         <asp:TextBox ID="txtDeliveryAddress" runat="server" Text='<%# Eval("DeliveryFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>
                         </ItemTemplate>

            <ItemStyle Width="50%" />
        </asp:DataList>

          <script type="text/javascript">

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked')) {$('input:text[id*=txtDeliveryAddress]').val($('input:text[id*=txtBillingAddress]').val());   }
       });
   });

The above script works fine only when the textbox mode is set to single and the text displayed on the delivery address is copied and pasted on txtBillingAddress when the checkbox is checked, but when the textmode is set to multiline , the jquery fails as textarea is rendered in a different way.

Any ideas how to get exactly the same feauture with asp.net text box set to multi line mode.

Thanks

Updated html:

<textarea name="ctl00$MainContent$CustomersDefaultPaging$ctl00$txtBillingAddress" rows="2" cols="20" id="ctl00_MainContent_CustomersDefaultPaging_ctl00_txtBillingAddress" style="height:150px;width:200px;"></textarea>

Answer 1

When you use textbox control in multiline mode it renders a textarea so accordingly your selector should be different. input:text selector will look for input fields of type text it will not select the textarea. Try this.

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               $('textarea[id*=txtDeliveryAddress]')
               .val($('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });

Since it is a DataList I am sure you have multiple elements on the page So in the above code you should pass the context while selecting textarea’s using checkbox element as reference. Try this

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               //Assuming every item is rendered as a separate table
               //If it is inside a div the change it to div
               var $parent - $(this).closest('table');
               $parent.find('textarea[id*=txtDeliveryAddress]')
               .val($parent.find('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });