title: Getting undefined response from jQuery AJAX form post
body: <pre><code>$(document).ready(function() {
      $('#pricingEngine').change(function() {
           var query = $("#pricingEngine").serialize();
           $('#price').fadeOut(500).addClass('ajax-loading');
           $.ajax({
               type: "POST",
               url: "index.php/welcome/PricingEngine",
               data: query,
               dataType: 'json',
               success: function(data)
               {
                 $('#price').removeClass('ajax-loading').html('$' + data.F_PRICE).fadeIn(500);
                 $('#sku').attr('value') = (data.businesscards_id);
               }
           });
      return false;
     });
  });
  </code></pre>
  
  <p>Need to set #sku as value of a hidden form field (not sure if i am doing that correctly in the above jQuery code.</p>
  
  <pre><code>&lt;input type="hidden" name="sku" id="sku" value="*/PUT VAR VALUE HERE/*" /&gt;
  </code></pre>
  
  <p>Also need to pass the <code>F_PRICE</code> to the <code>#price div</code>.</p>
  
  <p>Console in Chrome shows the JSON response as:</p>
  
  <pre><code>[
   {
    "businesscards_id":"12",
    "X_SIZE":"1.75x3",
    "X_PAPER":"14ptGlossCoatedCoverwithUV(C2S)",
    "X_COLOR":"1002",
    "X_QTY":"250",
    "O_RC":"NO",
    "F_PRICE":"12490",
    "UPS_GROUND":"12000",
    "UPS_TWODAY":"24000",
    "UPS_OVERNIGHT":"36000"
   }
  ]
  </code></pre>
  
  <p>Yet I only get 'undefined' in the price box. What is the reason here?</p>