ajax - Jquery ajaxSubmit also does the regular form submit

Question

I'm trying to run the following Jquery ajaxSubmit for one of my Magento stores. I use ajaxSubmit because I have 2 files to upload from the form as well (Means I need data in $_FILE). But when I do the ajaxSubmit it also dose the normal form submit which will refresh the page and take me to the next page, instead of staying on the same page where I have a pop-up box with some more stuff in it. I have return false; to prevent this, but it fails. The submit code:

$('#quickbuyform').submit(function (){

    // No Accessories: normal submit
    if ($('#accessories ul li').size()==0) {
        return true;
    }

    strName = "<?php echo $_product->getName() ?>";

    // loading message
    $('#pop_accessories_area_message').html("We are adding '"+strName+"' into your shopping cart ...");
    // Pop with loading
    popAccessories();

    // loading icon
    //var dataString = $('#quickbuyform').serialize();
    $.ajaxSubmit({  
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          beforeSubmit:  showRequest,
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php //echo $this->getUrl('checkout/cart') ?>';
          }  
        });
    return false;
});

So this is what I have now with e.preventDefault(), but now it does not Submit anything. Just stop at ('#quickbuyform').ajaxSubmit

$('#quickbuyform').submit(function (e){
    e.preventDefault();
    // No Accessories: normal submit
    if ($('#accessories ul li').size()==0) {
        return true;
    }

    strName = "<?php echo $_product->getName() ?>";

    // loading message
    $('#pop_accessories_area_message').html("We are adding '"+strName+"' into your shopping cart ...");
    // Pop with loading
    popAccessories();

    $('#quickbuyform').ajaxSubmit({  
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php echo $this->getUrl('checkout/cart') ?>';
          }  
        });
    return false;
});

score 3 · Accepted Answer

You can stop the normal form submit by calling preventDefault method of the event object.

$('#quickbuyform').submit(function (e) {
    e.preventDefault();
    ...
});

score 0 · Accepted Answer

Try using $.ajax instead, or e.preventDefault(); as suggested above:

$.ajax({
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          beforeSubmit:  showRequest,
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php //echo $this->getUrl('checkout/cart') ?>';
          }  
});

score 0 · Accepted Answer

You should try something like this -

$("#quickbuyform").submit(function(e){
    e.preventDefault();
  });

This will prevent the default behavior of your jQuery event.

ajax - Jquery ajaxSubmit also does the regular form submit

3 回答 3

Related

Reference