Question

我使用ajax允许我提交两种表格。

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

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

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

谢谢

Answer 1

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

来自Malsup网站：

//在DOM准备好时准备表单 $（document）.ready（function（）{ var options = { target：'＃output2'，//要用服务器响应更新的目标元素 beforeSubmit：showRequest，//预提交回调 success：showResponse // post-submit callback

    // 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; 
});

}）;

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

Answer 2

曾考虑使用jQuery Forms Plugin吗？它肯定会让你免于手动做这些事情。

Answer 3

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

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

两个AJAX表单提交，一个不起作用

3 个答案: