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="">
<input type="hidden" name="test1" value="1">
<input type="submit" value="report_0">
</form>
<form id="report_1" method="POST" target="_blank" action="">
<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);
}
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.">
<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.">
<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);
}
- 3 Just because you'd like to submit two forms at once doesn't mean you can do it. Adding a "submit both" button that submits both forms "works" in Firefox and IE. – RobG Commented Jul 9, 2013 at 5:53
- 1 RobG, what about Chrome? – natiz Commented Jul 9, 2013 at 6:26
5 Answers
Reset to default 4Not 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.
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:
- Store the values of the second form on the client somehow (cookie, localstorage, you name it)
- 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.
- Restore the values to the second form (server doesn't know those because they haven't got submitted)
- Submit the second form.
Form submit is a synchronous call to the server (HttpRequest). Hence, the second form can not be submitted. You are expecting to submit multiple forms without depending one on the other asynchronously. So, API like AJAX will solve the issue, but you are not looking for that.
If your design allows you to keep multiple frames/ iframes in your page, keep those forms in different frames/ iframes. With this approach, you can do submit multiple forms from the parent page.
If you can explain the requirement for submitting multiple forms at a time, and your limitations, you may get a better response.
we can achieve with both syn/asyn way, please refer below link with sample example.... i hope this will help you.
http://yogendrakrsingh.blogspot.in/2010/03/javascript-trick-submitting-multiple.html
or
with help of serialize over third hidden for mwe can achieve. this was already posted, please below link
Is to possible to submit two forms simultaneously?
If you try to submit the first form and its infromation to the same page as the second one, here is a solution:
Create a form that unites the fields of both and submit it. This is a modification of your code:
var form = document.createElement("form");
form.setAttribute("name", "report");
form.setAttribute("method", "POST");
form.setAttribute("target", "_blank");
form.setAttribute("action", action);
for (....) {
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);