Ajax form submit twice when include jcarousel script

Question

I'm using Ajax to submit my form, but when i click button Add to cart the form will submit twice but if i remove jcarousel , the form will submit like normal.

<form id="formrandom1473" name="formrandom1473" method="post" action="ajax_process.php?case=add_product_ajax&amp;pid=1473">
   <input type="hidden" value="1473" name="products_id">
   <input type="hidden" value="1" name="qty">
   <div class="add_to_cart_div">
      <input type="image" border="0" id="add-to-cart-1473" title=" Add to Cart " alt="Add to Cart" src="includes/languages/english/images/buttons/button_in_cart.gif">
   </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $("#add-to-cart-1473").click(function () {

     var formrandom1473 = $("#formrandom1473");
     formrandom1473.submit(function () {

        $.ajax({
            type: formrandom1473.attr("method"),
            url: formrandom1473.attr("action"),
            data: formrandom1473.serialize(),
            success: function (data) {
                $("#output").html(data);
                $(".message_div").addClass("message_success").slideDown().delay(6000).slideUp(); // Div success
                $(".cart_counter").load("ajax_process.php?case=cart_counter"); // Load new quantity / by quantity   
                $(".shopping_cart_box").load("ajax_process.php?case=shopping_cart_box"); // Load new shopping cart box / by product     
                $(".cart_dropdown").load("ajax_process.php?case=cart_dropdown"); // Load new shopping cart box / by product                             
            }
        });
            $("formrandom1473").unbind();
        return false;
     });    

    /* Effect */
        var productX = $("#cart-image-1473").offset().left;
        var productY = $("#cart-image-1473").offset().top;
        var basketX = $("#boxcart-content").offset().left;
        var basketY = $("#boxcart-content").offset().top;
        var gotoX = basketX - productX;
        var gotoY = basketY - productY;
        var newImageWidth = $("#cart-image-1473").width() / 3;
        var newImageHeight = $("#cart-image-1473").height() / 3;

        $("#wrapper").html("");
        $("#wrapper").css({"position":"absolute","top": productY,"left": productX});

        $("#cart-image-1473").clone()
            .prependTo("#wrapper")
            .css({"position" : "absolute", "border" : "1px dashed black"})
            .animate({opacity: 0.6})
            .animate({opacity: 0.0, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200,
            function() {
            });
    /* Effect */    

    }); //click

}); //ready
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('.mycarousel').jcarousel();
});
</script>

i tried to use $("formrandom1473").unbind(); but the problem still same.

Samuel Liew · Answer 1 · 2013-07-22T04:34:46.937

0

Did you mean to use $("#formrandom1473").unbind(); with the # instead?

Or, since you already stored the jQuery object earlier:

formrandom1473.unbind();

If unbind doesn't work for you, try this instead, but move it BEFORE the $.ajax:

formrandom1473.submit(function() { return false; });

Also, check your JS console for any errors.

edited Jul 22 '13 at 04:34

answered Jul 22 '13 at 04:29

Samuel Liew

76,741
107
159
260

score 0 · Accepted Answer · edited May 23 '17 at 12:03

After refer this comment .. the form finally can submit like normal after i'm using e.stopImmediatePropagation();

formrandom1473.submit(function (e) {
$.ajax({
    type: formrandom1473.attr("method"),
    url: formrandom1473.attr("action"),
    data: formrandom1473.serialize(),
    success: function (data) {
        $("#output").html(data);
        $(".message_div").addClass("message_success").slideDown().delay(6000).slideUp(); // Div success
        $(".cart_counter").load("ajax_process.php?case=cart_counter"); // Load new quantity / by quantity   
        $(".shopping_cart_box").load("ajax_process.php?case=shopping_cart_box"); // Load new shopping cart box / by product     
        $(".cart_dropdown").load("ajax_process.php?case=cart_dropdown"); // Load new shopping cart box / by product                             
    }
});
e.stopImmediatePropagation();
return false;

Ajax form submit twice when include jcarousel script

2 Answers2