title: How can I get Magento add to cart ajax push the right url and add the product to cart?
body: <p>I am implementing an ajax add to cart on a Magento site.</p>
  
  <p>Currently the right url to the product gets added in the form a tag and when I add to cart it works but I want this to post with ajax. The cart uses an <code>&lt;a&gt;</code> in the form that stores a url to a product through Magento's data template setup which can only be used as an <code>&lt;a&gt;</code> because of Magento's limitations.</p>
  
  <p>The markup for this is as follows:</p>
  
  <pre><code>&lt;form class="js-update-product" id="product_addtocart_form" action=""&gt;
                                  &lt;div class="colour-guide-link buying-options condensed-bold group"&gt;
                                      &lt;span&gt;Colour &amp;amp; Size&lt;/span&gt;
                                      (&lt;span class="icon-question-sign"&gt;&lt;/span&gt; &lt;a href="#"&gt;guide&lt;/a&gt;)
                                  &lt;/div&gt;
  
                                  &lt;div class="buying-options"&gt;
                                  &lt;? for ($i=0; $i &lt; count($available_colors); $i++) { ?&gt;
                                  &lt;a class="js-color-toggle button" href="#" data-color="&lt;?= $available_colors[$i] ?&gt;"&gt;
                                      &lt;?= $available_colors[$i] ?&gt;
                                  &lt;/a&gt;
                                  &lt;? } ?&gt;
                                  &lt;/div&gt;
                                  &lt;hr&gt;
                                  &lt;div class="size-options buying-options group"&gt;
                                  &lt;? foreach ($all_sizes as $size) { ?&gt;
                                  &lt;span class="radio-size"&gt;
                                      &lt;input type="radio" class="size-option" value="&lt;? echo $size ?&gt;" name="size" /&gt;
                                      &lt;label class="number"&gt;&lt;? echo $size ?&gt;&lt;/label&gt;
                                  &lt;/span&gt;
                                  &lt;? } ?&gt;                                
                                  &lt;/div&gt;
                                  &lt;!-- &lt;button type="submit" class="buy-button buying-options"&gt;&lt;/button&gt; --&gt;                 
                                  &lt;a href="#" class="buy-button buying-options js-add-to-cart button" data-products-in-cart="&lt;?= $products_in_cart ?&gt;"&gt;
                                  &lt;span class="label"&gt;Add to Bag&lt;/span&gt;
                                      &lt;span class="spinner"&gt;&lt;/span&gt;
                                      Add to bag
                                  &lt;/a&gt;
                                  &lt;div class="adding-msg"&gt;
                                      Adding to bag...
                                  &lt;/div&gt;
                              &lt;/form&gt;
  </code></pre>
  
  <p>Here is my code for the ajax that posts the form which is causing me issues.</p>
  
  <p>The ajax:</p>
  
  <pre><code>var productAddToCartForm = new VarienForm('product_addtocart_form');
  productAddToCartForm.submit = function (button, url) {
      if (this.validator.validate()) {
          var form = this.form;
          var oldUrl = form.action;
          if (url) {
              form.action = url;
          }
          var e = null;
          // Start of our new ajax code
          if (!url) {
              url = jQuery('.js-update-product').attr('action');
          }
          url = url.replace("checkout/cart", "ajax/index"); // New Code
          var data = jQuery('.js-update-product').serialize();
          data += '&amp;isAjax=1';
          jQuery('#ajax_loader').show();
          try {
              jQuery.ajax({
                    url: url,
                    dataType: 'json',
                    type : 'post',
                    data: data,
                    success: function(data){
                        jQuery('#ajax_loader').hide();
                            //alert(data.status + ": " + data.message);
                            if(jQuery('.block-cart')){
                                jQuery('.block-cart').replaceWith(data.sidebar);
                            }
                            if(jQuery('.header .links')){
                                jQuery('.header .links').replaceWith(data.toplink);
                            }
                    }
              });
          } catch (e) {
          }
          // End of our new ajax code
          this.form.action = oldUrl;
  
          if (e) {
              throw e;
          }
      }
  }.bind(productAddToCartForm);
  
  productAddToCartForm.submitLight = function(button, url){
          if(this.validator) {
              var nv = Validation.methods;
              delete Validation.methods['required-entry'];
              delete Validation.methods['validate-one-required'];
              delete Validation.methods['validate-one-required-by-name'];
              if (this.validator.validate()) {
                  if (url) {
                      this.form.action = url;
                  }
                  this.form.submit();
              }
              Object.extend(Validation.methods, nv);
          }
      }.bind(productAddToCartForm);
  </code></pre>
  
  <p>Ideally what I would like is the ajax js to find the url in the <code>&lt;a href=""&gt;</code> that is being clicked and use that to post as the url in the ajax. What I am struggling to get right is it finding the url in the form  and getting that into the post url.</p>
  
  <p>Is this possible with the script as it is set up now but with a few tweaks?</p>