Submit forms one by one using jQuery?

Question

How to set up an automatic queuing system to run multiple items one after another? I don’t want them to be sent immediately, or this could break my backend PHP script.

Here is a simple example, assuming that each form can submit independently, and the master submit will run all forms in the 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:

script I am working on a tool to back up FTP files and dump MySQL from multiple websites - essentially an automated backup tool for web administrators.

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

Copying files can take 20+ minutes to the site, so the idea is to create a “main button” to automate each backup one by one.

Answer 1

You can try this jQuery example. I encoded it on the fly, so it has not been 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> 

Answer 2

To do this, you would create simple javascript that would simply be a series of sentences. It will be something like:

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

Obviously, you might need the ajaxify process, as submitting the form will stop javascript execution.

I agree with the other answers that this will be a logical mistake on your behalf, and you should look at the integration of forms, not the overlap on the problem.

Answer 3

If one form relies on two other forms, it sounds like they really are part of the same form, and the backend should just determine which parts of this mega-form (with different data sets, but for the same form) that are needed . On a similar note, in any case, it is better not to rely on javascript, so this makes this automatically a more reliable solution.

Update If you have several forms that simply use data (for example, they can modify the data in form1 and form2 that form3 needs), it would be more stable, especially in the light of validation, to put these common things in hidden elements and leave the forms separate . Users who enter data that will be sent and used and then hide it from viewing are not optimal, as they can more easily enter input errors (they cannot view as easily and they may not understand that everything will be presented ) Using <input type = "hidden" / "> s for general information makes this easier because they won’t be able to accidentally change it. (Either keep it in the session or whatever you want. The point does not allow them to change the information to which you will rely on and they cannot easily detect errors.)

The form element returns a value (true / false) when it is submitted.

from here

Answer 4

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

Perhaps you better remake the application (front / rear)?

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