Submit forms, one after another with jQuery?

Question

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>

UPDATE:

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.

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.

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.

Answer 1

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>