Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Submitting 2 forms at the same time using JavaScript

I'm trying to submit 2 forms at the same time, using javascript. However, it seems like only the 2nd submit is opened, and not the first.

The code is fairly simple:

<html>
<body>
<form id="report_0" method="POST" target="_blank" action="https://www.google.com">
   <input type="hidden" name="test1" value="1">
   <input type="submit" value="report_0">
</form>
<form id="report_1" method="POST" target="_blank" action="https://www.google.com">
   <input type="hidden" name="test2" value="2">
   <input type="submit" value="report_1">
</form>
<script>
    document.getElementById("report_0").submit();
    document.getElementById("report_1").submit();
    </script>
</body>
</html>

I cannot use ajax or equivalent as it has to be the 'native' POST (due to CORS issues)

I've read somewhere that you can't submit 2 forms at once, this doesn't make sense to me. I've tried changing the target from "_blank" to "form1" & "form2" but still nothing.

Your assistance will be highly appreciated :)

EDIT

Here is what I actually use:

for (....) {
       var form = document.createElement("form");
       form.setAttribute("name", "report_"+i);
       form.setAttribute("method", "POST");
       form.setAttribute("target", "_blank");
       form.setAttribute("action", action);

       for (var key in parms) {
           var field = document.createElement("input");
           field.setAttribute("type", "hidden");
           field.setAttribute("name", key);
           field.setAttribute("value", parms[key]);
           form.appendChild(field);
       }
       console.log(form);
       document.body.appendChild(form);
       form.submit();
       document.body.removeChild(form);
}
like image 978
natiz Avatar asked Oct 03 '22 14:10

natiz


2 Answers

Not the prettiest way of doing it, but I thought it would be nice to share it anyways. I ended up solving it by using setTimeout:

var requestDelay = 2000;
document.getElementById("form-a").submit();

setTimeout(function() {
    document.getElementById("form-b").submit();
}, requestDelay);

This way, it waits until form A (probably, with an estimation of 2 seconds) has been submitted, and then submits form B. You might need to play around with the requestDelay to fit your needs.

like image 83
Timon de Groot Avatar answered Oct 12 '22 11:10

Timon de Groot


You can't do it this way. When a form is submitted, the whole page is "destroyed" and the form's response loaded as a new page.

JavaScript code runs single-threaded so basically you're triggering the submit event on two forms at once and only when your JS is done, the browser takes over again and tries to perform the task queue you gave to it.

So if you would like to submit both forms "normally" in a non-AJAX way, you'd have to:

  1. Store the values of the second form on the client somehow (cookie, localstorage, you name it)
  2. Submit the first form which results in a page that looks exactly the same only that somewhere in the content there is some trigger for your JS code to see that the first form already was submitted.
  3. Restore the values to the second form (server doesn't know those because they haven't got submitted)
  4. Submit the second form.
like image 29
defaude Avatar answered Oct 12 '22 10:10

defaude