用jQuery一个接一个地提交表单？

我如何设置一个自动队列系统来一个接一个地运行多个提交？我不希望他们立即提交，否则可能会破坏我的后端PHP脚本

下面是一个简单的示例，假设每个表单都可以独立提交，主提交将以系列方式运行所有表单

<input type="submit" id="submit_all" value="Submit All" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

更新：

我正在编写的脚本是一个用于备份多个网站的FTP文件和MySQL转储的工具，本质上是一个供web管理员使用的自动备份工具

每个表单包含连接到每个站点的FTP和MySQL的值，PHP函数在本地复制和存储文件，并创建一个MySQL转储

---

复制每个站点的文件可能需要20多分钟，因此我们的想法是创建一个“主按钮”来自动执行每个备份，一个接一个。

要做到这一点，您需要设置一些简单的javascript，这些javascript只是一系列提交。可能是这样的：

function submitAll() {
   document.forms["form-1"].submit();
   document.forms["form-2"].submit();
   document.forms["form-3"].submit();
}

显然，您可能需要调整流程，因为提交表单将停止javascript执行

---

我同意其他答案，即这似乎是代表您的逻辑错误，您应该考虑整合表单，而不是掩盖问题。

如果一个表单依赖于其他两个表单，那么听起来它们实际上是同一表单的一部分，后端应该找出一个巨型表单的哪些部分（使用不同的数据集，但只针对一种形式）需要。类似地，最好不要单独依赖javascript，这样做可以为您提供一个自动更健壮的解决方案

如果您有多个表单正在共享数据，请进行更新（就像他们可以更改表单3需要的表单1和表单2上的数据），将这些共享内容放在隐藏元素中，并将表单分开，这将更加稳定，尤其是在验证方面。让用户输入将提交和使用的数据，然后将其隐藏在视图中，这不是最佳做法，因为他们更容易犯输入错误（他们不能很容易地进行审查，他们可能不理解这些信息都将被提交）。使用共享信息的 表单元素在提交时返回一个值（true/false）

从

也许重新设计应用程序（前/后）对您来说更好

---

您可以尝试这个jQuery示例。我动态地编写了它，所以它没有经过测试，但您可以得到我想要做的

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var state = false;

$(document).ready(function() {
    $('#submit_all').click(function() {
        go();

        // get all forms on the page
        $forms = $('form');
        sent = 0;

        // post the form (non-async)
        $forms.each(function() {
            if(state) {
            $.ajax({
                type: "post",
                async: false,
                url: $(this).attr("action"), 
                data: $(this).serialize(), 
                success: function(data) { 
                    if(++sent == $forms.length) {
                        alert("All forms submitted!");
                    }
                }
            });
            } else { return false; }
        });
        stop();
    });

    $('#cancel').hide().click(stop);

    function go() {
        if(!state) {
            state = true;
            $('#submit_all').hide();
            $('#cancel').show();
            $('input[type=button], input[type=submit]').attr("disabled", "disabled");
    }}

    function stop() {
        if(state) {
            state = false;
            $('#submit_all').show();
            $('#cancel').hide();
            $('input[type=button], input[type=submit]').removeAttr("disabled");
    }}
});
</script>

<input type="button" id="submit_all" value="Submit All" />
<input type="button" id="cancel" value="Cancel" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

var状态=假；
$（文档）.ready（函数（）{
$（“#全部提交”）。单击（函数（）{
go（）；
//获取页面上的所有表单
$forms=$（'form'）；
发送=0；
//发布表单（非异步）
$forms.each（函数（）{
如果（州）{
$.ajax({
类型：“post”，
async:false，
url:$（this.attr（“操作”），
数据：$（this）.serialize（），
成功：函数（数据）{
如果（++sent==$forms.length）{
警告（“所有表格已提交！”）；
}
}
});
}else{return false；}
});
停止（）；
});
$（'#取消'）。隐藏（）。单击（停止）；
函数go（）{
如果（！状态）{
状态=真；
$（“#全部提交”）.hide（）；
$（“#取消”）.show（）；
$（'input[type=button]，input[type=submit]'）。attr（“已禁用”，“已禁用”）；
}}
函数停止（）{
如果（州）{
状态=假；
$（“#全部提交”）.show（）；
$（“#取消”）.hide（）；
$（'input[type=button]，input[type=submit]'）。removeAttr（“已禁用”）；
}}
});

您想同时单独提交所有表单，还是在上一个表单完成后再提交每个表单？我希望在上一个表单完成后再提交每个表单。谢谢，我会在早上试一试！脚本非常好！还有一件事……我如何分配一个按钮来中途取消流程？两个问题……控制台显示错误r“非法中断语句”，第二，是否应该将#cancel上的click事件设置为stop（）而不是stop？还了解到我的PHP脚本需要将async:设置为true，否则它们超时太早。再次感谢-脚本非常完美！

<form method="post" action="./function.php">
    <input type="text" name="foo[]" value="Foo" />
    <input type="text" name="foo[]" value="Foo" />
    <input type="text" name="foo[]" value="Foo" />
    <input type="submit" id="submit_all" value="Submit All" />
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var state = false;

$(document).ready(function() {
    $('#submit_all').click(function() {
        go();

        // get all forms on the page
        $forms = $('form');
        sent = 0;

        // post the form (non-async)
        $forms.each(function() {
            if(state) {
            $.ajax({
                type: "post",
                async: false,
                url: $(this).attr("action"), 
                data: $(this).serialize(), 
                success: function(data) { 
                    if(++sent == $forms.length) {
                        alert("All forms submitted!");
                    }
                }
            });
            } else { return false; }
        });
        stop();
    });

    $('#cancel').hide().click(stop);

    function go() {
        if(!state) {
            state = true;
            $('#submit_all').hide();
            $('#cancel').show();
            $('input[type=button], input[type=submit]').attr("disabled", "disabled");
    }}

    function stop() {
        if(state) {
            state = false;
            $('#submit_all').show();
            $('#cancel').hide();
            $('input[type=button], input[type=submit]').removeAttr("disabled");
    }}
});
</script>

<input type="button" id="submit_all" value="Submit All" />
<input type="button" id="cancel" value="Cancel" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>