使用AJAX提交多个表单

时间:2011-11-03 16:04:32

标签: jquery ajax forms form-submit

我有一个包含多个表单的页面。我想添加一个提交按钮,允许同时保存所有表单,如下所示:

<form id="form1" name="form1" action="someAction" method="post">
    ....form fields
</form>

<form id="form2" name="form2" action="someOtherAction" method="post">
    ....form fields
</form>

<form id="form2" name="form2" action="anotherAction" method="post">
    ....form fields
</form>

<a href="somewhere.html" onclick="submitAll();">Submit All Forms</a>

<script>
    function submitAll() {
        document.form1.submit();
        document.form2.submit();
        document.form3.submit();
    }
</script>

我遇到的问题是,一旦第一个表单被提交,它就会将页面重定向到该表单的目标 - 我想拦截该重定向,以便我可以处理下一个表单。

我知道这可以通过AJAX完成,它可以以某种方式允许我捕获返回的页面(如果我这样选择则忽略它),但我无法弄清楚如何在不映射每个字段的情况下执行此操作在手动形式。

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:9)

这应该通过ajax提交每个表单,而不必自己映射字段:

$('form').each(function() {
    var that = $(this);
    $.post(that.attr('action'), that.serialize());
});