使用 AJAX 提交多个表单 [英] submitting multiple forms with AJAX

问题描述

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

I have a page which contains several forms. I want to add a single submission button that will allow all the forms to be saved at the same time, as illustrated below:

<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>

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

The issue I'm having is that once the first form gets submitted, it is redirecting the page to that form's destination - I want to intercept that redirect so that I can process the next form.

我知道这可以通过 AJAX 完成，这会以某种方式让我捕获返回的页面(如果我愿意，可以忽略它)，但是如果不映射每个字段，我无法弄清楚如何执行此操作在表单中手动输入.

I know that this can be done via AJAX, which would somehow allow me to catch the returned page (and ignore it if I so choose), but I can't figure out how to do this without mapping each of the fields in the form manually.

有人可以帮忙吗?

推荐答案

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

This should submit each form via ajax without having to map the fields yourself:

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

这篇关于使用 AJAX 提交多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！