Question

如何设置自动排队系统来一个接一个地运行多个提交？我不希望他们立刻提交，或者它可能会破坏我的后端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转储的工具 - 本质上是一个面向网络管理员的自动备份工具。

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

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

Answer 1

你可以尝试这个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>

Answer 2

要做到这一点，你会设置一些简单的javascript，这只是一系列的提交。它会是这样的：

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

显然，您可能需要对流程进行调整，因为提交表单会暂停执行javascript。

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

Answer 3

如果一个表单依赖于另外两个表单，听起来它们实际上是同一个表单的一部分，后端应该只找出那个巨型表单的哪些部分（具有不同的数据集，但对于一个形式）需要的。在类似的说明中，最好不要单独依赖javascript，因此这样做可以为您提供自动更强大的解决方案。

更新如果你有多个只是共享数据的表单（比如他们可以改变form3和form2上需要的form2的数据），那么将这些共享内容放在隐藏元素中会更加稳定，特别是在验证方面。将表格分开。让用户输入将被提交和使用的数据然后将其从视图中隐藏起来并不是最佳的，因为他们可以更容易地输入错误（他们不能轻易地进行审查，他们可能不理解它将全部提交）。使用＆lt; input type =“hidden”/＆gt; s用于共享信息可以缓解此问题，因为它们无法意外更改它。（或者将它存储在会话中或者你喜欢的任何内容中。点是，阻止他们更改你将要依赖的信息，并且他们不能轻易发现错误。）

表单元素在您提交时返回一个值（true / false）。

来自here

Answer 4

$("#submit_all").click(function(){
    $("#form-1").submit();
    $("#form-2").submit();
    $("#form-3").submit();
})

您可能更好地重新设计应用程序（正面/背面）？

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

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

4 个答案: