使用jQuery一个接一个地提交表单？ [英] Submit forms, one after another with jQuery?

问题描述

如何设置自动排队系统来一个接一个地运行多个提交？我不希望他们立刻提交，或者它可能会破坏我的后端PHP脚本。

How can I set up an automated queue system to run multiple submits, one after another? I don't want them to submit at once, or it may break my backend PHP script.

这是一个简单的例子，假设每个表单可以独立提交，还有一个主人提交将以系列形式运行所有表格。

Here's a simple example, assuming each form can submit independently, and a master submit will run all the forms in series.

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

更新：

剧本I'正在努力的工具是备份多个网站的FTP文件和MySQL转储 - 本质上是一个Web管理员的自动备份工具。

The script I'm working on is tool to backup the FTP files and MySQL dump of multiple websites - essentially an automated backup tool for web administrators.

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

Each form contains the values to connect to the FTP and MySQL of each site, and the PHP function copies and stores the files locally and creates a MySQL dump.

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

Copying the files can take 20+ minutes per site, so the idea is to create a 'master button' to automate each backup, one after the other.

推荐答案

你可以尝试这个jQuery例。我是在飞行中对它编码的，所以它没有经过测试 - 但是你得到了我正在尝试做的事情。

You can try this jQuery example. I coded it on the fly, so it's not tested - but you get what I'm trying to do.

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

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