Add to cart button in related products leads to some view source page

Question

I am bit new to magento am facing an issue.i added add to cart button to related product but when cliks on it it open a new page showing a source code of something.am adding a screen shot

![Page shown after clinking add to cart button in related products]1

also when i check cart the product is added really. My add to cart button on home page is working fine

my related.phtml code is as follows

     <ol class="mini-products-list list-inline media-ol products-grid" id="block-related">
    <?php foreach($this->getItems() as $_item): ?>
    <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>" style="min-height: 407px;">
         <!--<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
                 <?php if (!$_item->getRequiredOptions()): ?>
                     <input type="checkbox" style="position: relative; right: -74px; top: 40px;" class="checkbox related-checkbox" id="related-checkbox<?php echo $_item->getId() ?>" ame="related_products[]" value="<?php echo $_item->getId() ?>" />
                 <?php endif; ?>
             <?php endif; ?>-->
             <div class="product">
                <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>" class="product-image">
                <img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(200) ?>"  alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
                <div class="product-details">
                    <p class="product-name media-pdt"><a style="font-size: 14px; color: #000;" href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->escapeHtml($_item->getName()) ?></a></p>
                    <?php echo $this->getPriceHtml($_item, true, '-related') ?>
                    <!--<?php if ($this->helper('wishlist')->isAllow()) : ?>
                        <a href="<?php echo $this->getAddToWishlistUrl($_item) ?>" class="link-wishlist"><?php  echo $this->__('Add to Wishlist') ?></a>
                    <?php endif; ?><br/>
                    -->
                    <div class="col-md-12" style="margin-top: 20px;">
                        <form action="<?php echo $this->getAddToCartUrl($_item) ?>" method="post" id="product_addtocart_form_<?php echo $_item->getId()?>"<?php if($_item->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>> 
                            <div class="btn-med-add"><div style="text-align: center;">
                                <a href="<?php echo $this->getUrl('checkout/cart');?>"><button type="submit"  title="<?php echo $buttonTitle ?>" class="btnbtn-success" ><span><span><?php echo $buttonTitle; ?></span></span>Add To Cart</button></a>
                             </div>
                         </form>
                    </div>            
                </div>
             </div>
    </li>
   <?php endforeach ?>
 </ol>

Please can any help

My add to cart js file code is as follows

jQuery(document).ready(function() {

   jQuery('.item button').on('click', function () {         //alert('what');
    jQuery('#mini-cart').load(document.URL +  ' #mini-cart');

        var cart = jQuery('#custom-cart');      //alert(this.value);
        var imgtodrag = jQuery(this).parents('.item').find("img").eq(0);

        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
               .offset({
                   top: imgtodrag.offset().top,
                   left: imgtodrag.offset().left
                })
               .css({
                 'opacity': '0.5',
                 'position': 'absolute',
                 'height': '150px',
                 'width': '150px',
                 'z-index': '100'
               })
               .appendTo(jQuery('body'))
               .animate({
                  'top': cart.offset().top + 10,
                  'left': cart.offset().left + 10,
                  'width': 75,
                  'height': 75
                }, 1000, 'easeInOutExpo');

            setTimeout(function () {
                 cart.effect("shake", {
                      times: 2
                 }, 200);
             }, 1500);

             imgclone.animate({
                 'width': 0,
                 'height': 0
             }, function () {
                  jQuery(this).detach()
             });

          }
     }); 
 });

Answer 1

It seams that you have an extension for adding products to cart via AJAX.
This means your addAction from the cart controller is rewritten.
Either disable the extension or find out the js function that should be called when adding a product to cart and apply it to the related products add to cart button.
That function should handle the AJAX response and update the dom elements related to the cart.
[EDIT]
Your code does not work because the selector that triggers the ajax is .item button but your link is an a tag.
Add a class on the link to the cart. let's say add-to-cart like this:

<a href="<?php echo $this->getUrl('checkout/cart');?>"><button type="submit"  title="<?php echo $buttonTitle ?>" class="btnbtn-success add-to-cart" ><span><span><?php echo $buttonTitle; ?></span></span><?php echo $this->__('Add To Cart')?></button></a>

and modify the js making the first line look like this:

jQuery('.item button, .add-to-cart').on('click', function () { 

Answer 2

if you are using magento 2, you can try to use this extension to smooth fly effect of product image, after you add product to cart: https://marketplace.magento.com/adam-flytocart.html