Question

我正在尝试为我的一个Magento商店运行以下Jquery ajaxSubmit。我使用ajaxSubmit，因为我也有2个文件要从表单上传（意味着我需要$_FILE中的数据）。但是，当我执行ajaxSubmit时，它还会正常表单提交，这将刷新页面并将我带到下一页，而不是停留在同一页面上，我有一个弹出框，其中包含更多内容。我有 return false; 来阻止这种情况，但它失败了。提交代码：

$('#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;
});

所以这就是我现在使用的e.preventDefault()，但现在它没有提交任何内容。请停在('#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;
});

Answer 1

您可以通过调用事件对象的preventDefault方法来停止正常表单提交。

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

Answer 2

尝试使用$ .ajax，或者如上所述使用e.preventDefault();：

$.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') ?>';
          }  
});

Answer 3

你应该尝试这样的事情 -

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

这将阻止jQuery事件的默认行为。

Jquery ajaxSubmit也会提交常规表单

3 个答案: