title: Appending text in a HTML form textarea with Javascript
body: <p>I have a selectlist that is populated from a CFC. Based on the what a user selects from my selectlist, a set of predefined text is written into a textarea. Currently my code will replace whatever is currently in the textarea with the CFC data. I am looking to instead append the text but cannot figure out how.</p>
  <p><strong>Here is how I populate my list:</strong></p>
  <pre><code>$(&quot;#addDescriptionForm&quot;).submit(function(){
     // prevent native form submission here
          $.ajax({
              type: &quot;POST&quot;,
              data: $('#addDescriptionForm').serialize(),
              url: &quot;actionpages/add_descriptions_modal.cfm&quot;,
              beforeSend: function () {
              $(&quot;#addDescriptionResponse&quot;).html( &quot;&quot; );
              $('.loader').show();
              },
              complete: function () {
              $('.loader').hide(3000);
              },
              success: function() {
                PopulateSelectLists();//Call Function to refresh selectlist
                $(&quot;#addDescriptionResponse&quot;).html( &quot;Successfully added description.&quot; );
                
                //reset modal form
                $( '#addDescriptionForm' ).each(function(){
                      this.reset();
                  });
              
                }
          });
          return false;
      });
  </code></pre>
  <p><strong>When a selection is chosen, here is my javascript that replaces the text in the textarea with the data from my CFC:</strong></p>
  <pre><code>$(document).ready(function(){
      $(&quot;#detail_ticket_lines table&quot;).on('change', &quot;.tr_clone_lines select[id*=detail_descriptionDD]&quot;, function(event) {
          var selectelement=$(this);
          // Populate the  description textarea when the selectlist ajax completes successfully
          if ($(this).val() == 'ADD NEW') { // require a URL
            $('#addDescriptionsLink').trigger('click'); // redirect
            return false;
           }
           else
           {
              $.ajax({
                  url:'cfcs/get_descriptions.cfc?method=getDetail&amp;returnformat=json',
                      data: { description: $(selectelement).val() }
                  ,
                  success: function(response) {
                          $(&quot;#detail_service_detail&quot;+$(selectelement).closest(&quot;tr&quot;).attr(&quot;data-index&quot;)).val( response );
                          console.log(&quot;Details entered into desciption field&quot;);
                      },
                  error:function(msg){
                     console.log(&quot;Error with descriptions field 1 Loading&quot;);
                      }
                });
           }
      });
  </code></pre>
  <p><strong>Here is my HTML form elements:</strong></p>
  <pre><code>&lt;select name=&quot;detail_descriptionDD$rowindex&quot; id=&quot;detail_descriptionDD$rowindex&quot;&gt;
          &lt;option&gt;----Choose from the list----&lt;/option&gt;
          &lt;option&gt;ADD NEW&lt;/option&gt;
          &lt;/select&gt;
  
  &lt;textarea class='expanding' name=&quot;detail_service_detail$rowindex&quot; cols=&quot;100&quot; rows=&quot;5&quot; id=&quot;detail_service_detail$rowindex&quot; tabindex=&quot;0&quot; &gt;&lt;/textarea&gt;
  </code></pre>
  <p>How can I revampt this to append the current text in my textare instead of replacing it, once an option is chosen from the selectlist?</p>