I have a few products in a mySQL database whose links are being retrieved in my script with $producturl. These url's actually add the product to the cart (/?add-to-cart=1127). I am trying to create a script that will allow the user to add products to the cart but NOT redirect them, just execute the link so the user stays on the same page.

I am using preventDefault and stopPropgation but it is not working. The alert shows up but the link itself is not executing when I view my cart later the product is not there. Any help?

<?php $producturl = ProductURL::find(array('Product'=>$tube1->Tube1));
if($producturl[0]->URL!=NULL){  
echo '<span id="shop">Add Cart NoRedirect</span>';
}
?>

<script type="text/javascript">
$(document).on('click', '#shop', function (event) {
 $.post( '<?php echo $producturl[0]->URL; ?>' );
event.preventDefault();
event.stopPropagation();
alert('Product has been added to cart');
});
</script>

I have a few products in a mySQL database whose links are being retrieved in my script with $producturl. These url's actually add the product to the cart (http://www.example.com/cart/?add-to-cart=1127). I am trying to create a script that will allow the user to add products to the cart but NOT redirect them, just execute the link so the user stays on the same page.

I am using preventDefault and stopPropgation but it is not working. The alert shows up but the link itself is not executing when I view my cart later the product is not there. Any help?

<?php $producturl = ProductURL::find(array('Product'=>$tube1->Tube1));
if($producturl[0]->URL!=NULL){  
echo '<span id="shop">Add Cart NoRedirect</span>';
}
?>

<script type="text/javascript">
$(document).on('click', '#shop', function (event) {
 $.post( '<?php echo $producturl[0]->URL; ?>' );
event.preventDefault();
event.stopPropagation();
alert('Product has been added to cart');
});
</script>

• javascript
• jquery
• preventdefault

• 1 Have you tried return false; instead of preventDefault(); ? – user3065931 Commented Mar 16, 2015 at 14:42
• i think alert will stop the return function() . u just remove the alert and check it .. if you want alert use some jquery pop up, – Balachandran Commented Mar 16, 2015 at 14:50
• I replaced return false but it didn't work (checking the cart after clicking and it says nothing in cart). I also removed the alert function to check manually after. – chronotrigga Commented Mar 16, 2015 at 15:39

4 Answers 4

Your HTML anchor link:

<a id='link1' href="http://www.google.com">Link</a>

The jQuery JS required (don't forget to put this inside a DOM ready function):

// Act on clicks to a elements
$("#link1").on('click', function(e) {
    // prevent the default action, in this case the following of a link
    e.preventDefault();
    // capture the href attribute of the a element
    var url = $(this).attr('href');
    // perform a get request using ajax to the captured href value
    $.get(url, function() {
        // success
    });
});

This demonstrates all the principles required to implement your function.

The page in question and the URL POSTed to must be on the same subdomain, or cross origin resource sharing must be appropriately enabled on the server otherwise the request will fail due to cross domain restrictions.

Try:

'<a href="#" id="shop">Add Cart NoRedirect</a>'

or

'<a href="javascript: return false;" id="shop">Add Cart NoRedirect</a>'

You can use an image, a button, a div or a text decorated as link instead of a link.

'<a href="javascript: void(0);" id="shop">Add Cart NoRedirect</a>'