title: jquery append to input value
body: <p>This is the last problem i have with my form (hopefully)</p>
  
  <p>What I want to do is append the <strong>var size</strong> to my hidden input called <strong>my-item-name</strong></p>
  
  <p>I have tried adding this</p>
  
  <pre><code>form.find('[name=my-item-name]').append(size.val());
  </code></pre>
  
  <p>but it doesn't work.</p>
  
  <p>What is the correct way to append the size val to the input?</p>
  
  <pre><code>&lt;form method="post" action="" class="jcart"&gt;
      &lt;fieldset&gt;
          &lt;input type="hidden" name="jcartToken" value="13823c48f896c49403465fcce9f135ac" /&gt;
  
          &lt;input type="hidden" name="my-item-id" value="12" /&gt;
          &lt;input type="hidden" name="my-item-price" value="15.99" /&gt;
          &lt;input type="hidden" name="my-item-url" value="http://yahoo.com" /&gt;
          &lt;input type="hidden" name="my-item-name" value="Operation Braveheart hooded sweatshirt" /&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;select name="my-select" id="foo12"&gt;
                      &lt;option value='Small'&gt;Small&lt;/option&gt;
                      &lt;option value='Medium'&gt;Medium&lt;/option&gt;
                      &lt;option value='Large'&gt;Large&lt;/option&gt;
                      &lt;option value='X-Large'&gt;X-Large&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;Price: $&lt;span id="price12" class="price"&gt;15.99&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;label&gt;Qty: &lt;input type="text" name="my-item-qty" value="1" size="3" /&gt;&lt;/label&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;input type="submit" name="my-add-button" value="add to cart" class="button" /&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;                
  &lt;script type="text/javascript"&gt;
      var item_prices_by_size12 = { "Small": { "Price": "15.99", "ItemId": "9-1" },"Medium": { "Price": "16.99", "ItemId": "9-2" },"Large": { "Price": "17.99", "ItemId": "9-3" },"X-Large": { "Price": "18.99", "ItemId": "9-4" }};
      $(function() {
  
          $('#foo12').change(function() {
  
              var form = $(this).parents('form');
  
              // Size is whatever the value the user has selected
              var size = $(this).val();
  
              // Determine the correct price and item ID based on the selected size
              var price12  = item_prices_by_size12[size].Price,
              itemId = item_prices_by_size12[size].ItemId;
  
              form.find('#price12').text(price12);
  
              form.find('[name=my-item-price]').val(price12);
  
              // Update the item ID
              form.find('[name=my-item-id]').val(itemId);
  
              form.find('[name=my-item-name]').append(size.val());
  
          });
      });
  &lt;/script&gt;
  </code></pre>