Submit three forms within short timeout

Question

I have three forms, not always all three will be defined (in many cases it's just two), but in any scenarios I would like to send them. Action page will be execute something. Current script works fine with 1 or 2, but not 3 forms.

Any chance that it can be done with simple JS or CF only? Or may be there is better way to handle this?

<form id="CreateTask1" action=action.cfm>
<form id="CreateTask2" action=action.cfm>
<form id="CreateTask3" action=action.cfm>

   <script type="text/javascript">
      function submitforms() {
        if (document.getElementById('CreateTask1') != null)
            document.forms.CreateTask1.submit();
            window.setTimeout(function() {
        if (document.getElementById('CreateTask2') != null)
            document.forms.CreateTask2.submit();
            }, 100);
            window.setTimeout(function() {
        if (document.getElementById('CreateTask3') != null)
            document.forms.CreateTask3.submit();
            }, 100);
        }
    </script>

Submitting a form reloads the page. The rest of the script stops running. — Barmar, Jun 29 '20 at 21:58
The reload is asynchronous, it's waiting for the response from the server. So the first form might slip in before it happens. — Barmar, Jun 30 '20 at 00:36
Since you asked if there was a better way to handle this, I suggest a single form. — Dan Bracuk, Jun 30 '20 at 03:23

Marcelo Amorim · Answer 1 · 2020-07-01T15:21:49.133

Maybe you should use AJAX to achieve this.

So if you have three different forms to send, there are several ways about making asynchronous requests. We could use some lib like JQuery or even pure javascript with its new features (API Fetch) in a modern way, or using the usual XMLHttpRequest.

Here is the explanation about making multiple XMLHttpRequests in a for loop, which in your case, can be matched with document.forms length.

Something like this:

 function sendForms() {
  var xhr = [],
    i;

  for (i = 0; i < document.forms.length; i++) {
    //for loop
    (function (i) {
      var form = document.forms[i];
      var input = document.getElementById("input1");
      var inputData = encodeURIComponent(input.value);
      xhr[i] = new XMLHttpRequest();
      url = "your_page.php?" + input.name + "=" + inputData;
      xhr[i].open("POST", url, true);
      xhr[i].onreadystatechange = function () {
        if (xhr[i].readyState === 4 && xhr[i].status === 200) {
          console.log(
            "Response from form " + i + " is [ " + xhr[i].responseText + "]"
          );
        }
      };
      xhr[i].send();
    })(i);
  }

}

sendForms();

You may want to construct the parameters to send dynamically, for this you can use FormData to help, or maybe consider use JQuery to ease up the steps.

Sorry to not provide a more detailed answer earlier, but I don't know if you are able to use AJAX in your project, but for me, using these timeouts don't look like a good solution.

Then he probably should have included an example that would work for OP. — TRose, Jun 30 '20 at 15:47

score 1 · Accepted Answer · answered Jun 29 '20 at 23:43

I suppose you could

 <form id="CreateTask1" action="action.cfm" target="iframe1"></form>
 <iframe name="iframe1" src="blank.html"></iframe>

 <form id="CreateTask2" action="action.cfm" target="iframe2"></form>
 <iframe name="iframe2" src="blank.html"></iframe>

 <form id="CreateTask3" action="action.cfm" target="iframe3"></form>
 <iframe name="iframe3" src="blank.html"></iframe>

<script type="text/javascript">
  function submitforms() {
    if (document.getElementById('CreateTask1') != null)
        document.forms.CreateTask1.submit();
        window.setTimeout(function() {
    if (document.getElementById('CreateTask2') != null)
        document.forms.CreateTask2.submit();
        }, 100);
        window.setTimeout(function() {
    if (document.getElementById('CreateTask3') != null)
        document.forms.CreateTask3.submit();
        }, 100);
    }
</script>

Submit three forms within short timeout

2 Answers2