0

我正在使用 ajax from 允许我提交两个表单。

我在同一页面上有一个添加到购物车和一个更新购物车表单。

我正在使用以下代码来触发添加到购物车或更新购物车提交。

$('#cart-container').on('submit','form',function() {
    $(this).ajaxSubmit({
        success: cart
    }); 
    return false; 
});

function cart() {
    var path = '/enter/embed-cart';
    $('#cart-container').fadeTo('fast', 0.5).load(path, function() {
        $('#cart-container').fadeTo('fast', 1);
    }); 
}

我已经在禁用 ajax 的情况下测试了这两种表单，它们运行良好，所以我知道这些表单工作正常。

使用该脚本，添加到购物车表单工作正常，但更新表单未提交。奇怪的是，功能 cart() 正在运行，但是当 load() 完成时，表单还没有更新。我想知道 div #cart-container 中是否有两个表单意味着它只针对第一个（添加到购物车表单），但为什么它仍然会运行更新表单的提交？

谁能明白为什么会发生这种情况？

这是精简的 HTML。这些表格没有多大意义，因为它们来自 CMS。

<div id="cart-container" class="divide clearfix">
    <div id="purchase-submissions" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >
            <input type="submit" value="Add" class="cart-btn add-item">
        </form>

    </div> <!-- End of .grid -->

    <div id="cart" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >

            Update form details

        </form> 

    </div> <!-- End of .grid -->

</div> <!-- End of #cart-container-->

谢谢

4

3 回答 3

1

表单在正常提交时更新的原因是因为您正在刷新页面上的内容（表单），您需要将表单放在 div 中并从该 div 中发布，然后刷新该 div 以查看相同的内容结果。虽然 ajaxForm 在幕后提交内容，但它不会为您“更新”表单。为此，我会将表单和脚本放在一个页面中，将其调用到容器 div 中，然后在该 div 中进行提交，然后刷新该 div。查看 ajaxForm“目标”方法。

来自 Malsup 网站：

// 当 DOM 准备好时准备表单 $(document).ready(function() { var options = { target: '#output2', // 使用服务器响应更新的目标元素 beforeSubmit: showRequest, / / 提交前回调成功：showResponse // 提交后回调

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
}; 

// bind to the form's submit event 
$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

});

如果您需要我创建一个实际示例，请告诉我。

于 2013-05-29T12:44:41.830 回答
0

你需要在表格上有 ids，我会为每个基本的他们各自的我有一个单独的 jquery 调用。您正在尝试提交一个 div。

您也可以尝试调用“#cart-container form”，因为提交需要绑定到表单。

于 2013-05-29T12:11:05.443 回答
0

曾经考虑过使用jQuery Forms Plugin吗？它肯定会让您免于手动执行此类操作。

于 2013-05-29T11:42:36.177 回答