title: Load overwrites input text box when using callback function
body: <p>I am programming a 'add to cart' button that makes an ajax call to the database and on success returns the valid data.  After returning the data I want to have it load an HTML file and the run a callback function to populate the input fields with the ajax data.</p>
  
  <p><strong>My problem</strong>: When the callback runs it overwrites the prior HTML values.</p>
  
  <p>AJAX:</p>
  
  <pre><code>success: function(data) {
      $('.upc').val('');
      $('#cart').append(
          $('&lt;div /&gt;').load('views/sale/_addItem.php',function(){
              $('#qty').val('1');
              $('#upc').val(data['upc']);
              $('#name').val(data['name']);
              $('#price').val(data['price']);
          })
      );
  </code></pre>
  
  <p>_addItem.php File</p>
  
  <pre><code>&lt;input id="qty" type="text" value="" name="qty[]"&gt;
  &lt;input id="upc" type="text" value="" name="upc[]" disabled&gt;
  &lt;input id="name" type="text" value="" name="name[]" disabled&gt;
  &lt;input id="price" type="text" value="" name="price[]" disabled&gt;
  &lt;input id="extprice" type="text" value="" name="extprice[]" disabled&gt;
  &lt;br/&gt;
  </code></pre>
  
  <p><a href="https://gist.github.com/cgsmith/7792758" rel="nofollow"><strong>Here is the gist.  Removed unnecessary code.</strong></a></p>
  
  <p>Edit: I don't know why this is getting downvotes.  I am looking at what is the best way to handle this.</p>