title: how to pass values of dynamically created form fields to a textarea
body: <p>I'm trying to create a simple form with a dynamic form element 'add'/'remove' feature. Ultimately, once the entries are complete, I would like the form results to display in a textarea.</p>
  
  <p>I searched through this forum and managed to cobble together something that does some, but not all of my goals. It will dynamically make my form elements, and remove them. However, when I try to display the results in my textarea, only the 1st option shows. Further, when I enter something into my text input, all subsequent new fields are prepopulated with that user text. Lastly, since one of my elements is a selectbox, I wonder if someone as a better idea of how to let a user pick among 20-30 options that would be there?</p>
  
  <p>my HTML</p>
  
  <pre><code>    &lt;form name="builder"&gt;
      &lt;fieldset&gt;
           &lt;h2&gt;Select your results&lt;/h2&gt;
  
          &lt;div id="IPOX"&gt;
              &lt;p&gt;
                  &lt;select name="column1" id="col1"&gt;
                      &lt;option value="A"&gt;A&lt;/option&gt;
                      &lt;option value="B"&gt;B&lt;/option&gt;
                      &lt;option value="C"&gt;C&lt;/option&gt;
                      &lt;option value="D"&gt;D&lt;/option&gt;
                      &lt;option value="E"&gt;E&lt;/option&gt;
                      &lt;option value="F"&gt;F&lt;/option&gt;
                      &lt;option value="Z"&gt;Z&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;select name="column2" id="col2"&gt;
                      &lt;option value="POS"&gt;POS&lt;/option&gt;
                      &lt;option value="NEG"&gt;NEG&lt;/option&gt;
                      &lt;option value="EQUIV"&gt;EQUIV&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input type="text" name="usercomm" id="usercomm"&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;p&gt;&lt;span class="add"&gt;Add another row&lt;/span&gt;
  
          &lt;/p&gt;
      &lt;/fieldset&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;p&gt;
          &lt;input type="button" id="submit" value="Done!" onclick="printIHC()" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my js</p>
  
  <pre><code>    $(window).load(function () {
      $(function () {
          var defaults = {
              'usercomm': '-'
          };
  
          // separating set and remove
          // note that you could add "defaults" as an arg if you had different
          // defaults for different fieldsets
          var setDefaults = function (inputElements) {
              $(inputElements).each(function () {
                  var d = defaults[this.name];
                  if (d) {
                      // set with jQuery
                      // we don't need the data - just check on the class
                      $(this).val(d)
                          .addClass('default_value');
                  }
              });
          };
  
          var removeDefaults = function (inputElements) {
              $(inputElements).each(function () {
                  if ($(this).hasClass('default_value')) {
                      $(this).val('')
                          .removeClass('default_value');
                  }
              });
          };
  
          setDefaults(jQuery('form[name=builder] input'));
  
          $("span.add").click(function () {
              // get the correct fieldset based on the current element
              var $fieldset = $(this).closest('fieldset');
              var $inputset = $('p', $fieldset)
                  .first()
                  .clone()
                  .insertBefore($('p', $fieldset).last());
              // add a remove button
              $inputset.append('&lt;span class="remove"&gt;Remove&lt;/span&gt;');
              setDefaults($('input', $inputset));
              // return false; (only needed if this is a link)
          });
  
          // use delegate here to avoid adding new 
          // handlers for new elements
          $('fieldset').delegate("span.remove", {
              'click': function () {
                  $(this).parent().remove();
              }
          });
  
          // Toggles 
          $('form[name=builder]').delegate('input', {
              'focus': function () {
                  removeDefaults($(this));
              },
                  'blur': function () {
                  // switch to using .val() for consistency
                  if (!$(this).val()) setDefaults(this);
              }
          });
      });     
  });
  // Print values to textarea
          function printIHC() {
              var myIHC = document.getElementById('output');
              var selectAb = document.getElementById('col1');
              selectAb.onchange = this.value;
              var selectVal = document.getElementById('col2');
              selectVal.onchange = this.value;
              var userTxt = document.getElementById('usercomm');
  
              ihcOut = 'Column 1\tValue \tComments\n---------------------------------\n' + selectAb.value + '\t\t' + selectVal.value + '\t' + userTxt.value + '\n';
              myIHC.value += ihcOut;
          }
  </code></pre>
  
  <p>I'm no programmer by trade, so I don't know if I should be mixing javascript and jquery. i also have a feeling like when the form elements are dynamically created, they appear silent to the print script. Lastly, many of the topics related to this involve PHP scripts, which I would like to avoid as I don't fully understand how those work.</p>
  
  <p>I tried to make this a jsfiddle, if that is easier to view - <a href="http://jsfiddle.net/Vqzk9/" rel="nofollow">http://jsfiddle.net/Vqzk9/</a></p>
  
  <p>Thanks for any help</p>