title: Add Product Options to Cart via AJAX and <form> | Opencart
body: <p>This is my first ever question here so any help would be appreciated. I've found a great deal of related information but nothing which exactly fits the bill.</p>
  
  <p>I'm trying to add a product with its various options to the cart via an HTML form and AJAX. Adding the product itself was the first obstacle but it now seems like a bit of a hollow victory.</p>
  
  <p>My form looks like this: (there are more products in the list but I have redacted to save space)</p>
  
  <pre><code>&lt;form action="http://[site_url].com/index.php?route=checkout/cart/add/" id="quickQuoteForm" method="post"&gt;
  &lt;h3&gt;Select your course&lt;/h3&gt;
  &lt;div class="quickPriceRow1 row1"&gt;
    &lt;label&gt;Choose a course&lt;/label&gt;
    &lt;select class="quickPriceSelect" name="product_id" rel="1"&gt;
      &lt;option selected="selected" value=""&gt;Please choose...&lt;/option&gt;
      &lt;option name="product_id" value="50"&gt;Intensive General English - 15 hours per week&lt;/option&gt;
      &lt;option name="product_id" value="51"&gt;Intensive General English Course + Consolidation English/Exam Preparation Workshops (20 hours per week)&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Then, contained in the same form, I have the Product Options like so:</p>
  
  <pre><code>&lt;label&gt;Choose a start date&lt;/label&gt;
  &lt;select name="start_date" class="quickPriceSelect2" rel="2" id="start_date"&gt;
      &lt;option value="" selected="selected"&gt;Please choose...&lt;/option&gt;
  
      &lt;option name="option[5]" value="49"&gt;Monday July 28&lt;/option&gt;
      &lt;option name="option[5]" value="50"&gt;Monday August 04&lt;/option&gt;
      &lt;option name="option[5]" value="51"&gt;Monday August 11&lt;/option&gt;
      &lt;option name="option[5]" value="52"&gt;Monday August 18&lt;/option&gt;
            etc...
   &lt;/select&gt;
  </code></pre>
  
  <p>Now, I'm not 100% I've got the "name=..." right but I've tried both 'name="option[5]"' and 'name="option_id[5]"' with no change. The [5] I took from the 'option_description' table and 'option_id' column and the value="50" from the 'option_value_description' table and 'option_value_id' column.</p>
  
  <p>Thanks to this thread <a href="https://stackoverflow.com/questions/20546767/how-do-i-add-a-product-to-opencart-from-an-external-site/20548484#20548484">How do I add a product to OpenCart from an external site?</a> (and a little tinkering) I've got the product adding to the cart no problem, but the options are stumping me completely.</p>
  
  <p>My jQuery is:</p>
  
  <pre><code>$(document).ready(function() {
      $('#quickQuoteForm button').click(function(e) {
          e.preventDefault(); // prevent the form from submitting
  
          $.ajax({
              type: 'POST',
              dataType: 'json',
              url: 'http://[site_url].com/index.php?route=checkout/cart/add/',
              data: 'product_id=' + $('.quickPriceSelect').val() + '&amp;quantity=1' + '&amp;product_option_id=' + $('.quickPriceSelect2').val() + '&amp;product_option_id=' + $('.quickPriceSelect3').val(),
              success: function(json) {
                  window.location = 'http://[site_url].com/index.php?route=checkout/cart';
              }
          });
      });
  });
  </code></pre>
  
  <p>If anyone could point me in the right direction it'd be a massive help, thank you.</p>
  
  <p><strong>## UPDATE ##</strong></p>
  
  <p>Ok, so I'm no further on with it but I have changed my JS to match what I found in the product.tpl files (both Default and the theme I'm using; Acceptus). I now have:</p>
  
  <pre><code>&lt;script&gt;
  $('#button-cart').bind('click', function() {
      $.ajax({
          url: 'index.php?route=checkout/cart/add',
          type: 'post',
          data: $('select[name="product_id"], select[name="option[5]"], select[name="option[13]"]'),
          dataType: 'json',
          success: function(json) {
              $('.success, .warning, .attention, information, .error').remove();
  
              if (json['error']) {
              if (json['error']['option']) {
                  for (i in json['error']['option']) {
                      $('#option-' + i).after('&lt;span class="error"&gt;' + json['error']['option'][i] +     &lt;/span&gt;');
              }
          }
      } 
  
      if (json['success']) {
          $('#notification').html('&lt;div class="success" style="display: none;"&gt;' + json['success'] + '&lt;img src="catalog/view/theme/acceptus/image/icons/remove/close.png" alt="" class="close" /&gt;&lt;/div&gt;');
  
          $('.success').fadeIn('slow');
  
          $('#cart-total').html(json['total']);
  
          $('html, body').animate({ scrollTop: 0 }, 'slow'); 
      }   
  
          if (json['success']) {
              window.location = 'http://studioamanchester.com/index.php?route=checkout/cart';
          }
      }
  });
  });
  &lt;/script&gt;'
  </code></pre>
  
  <p>Again, it's adding the product but none of the options. I've tried on the default theme and installed the site locally to test it but still nothing. Is there anything else to try?</p>