jQuery submits only one form when multiple forms are submitted

Question

I am writing a chrome extension. In my content script I am injecting two forms into the DOM with target = "_blank" . The forms are visible on the page

Form 1

<form action="page1.php" target="_blank" id="form1" method="POST">
    <input type="submit" value="Save" id="savebutton1">
</form>

Form 2

<form action="page2.php" target="_blank" id="form2" method="POST">
    <input type="submit" value="Save" id="savebutton2">
</form>

I want to submit the two forms using jQuery so I wrote ;

   $( "#form1" ).submit();
   $( "#form2" ).submit();

But finally only one tab opens, that is only the last form submits and my first form is ignored. But I want to open two tabs

I can not only see page2.php in one tab. My page1.php is never called. Please help in fixing the issue

Answer 1

This is not possible.

The browser can only submit one form and handle whatever redirect that single form generates at server.

If you need multiple forms to submit you would need a different approach such as using ajax

Answer 2

As @charlietfl said, this can't be done as you are trying to do it.

However, depending upon your back end system, you may be able to make a composite form and parse the data there. C# , I know, can handle this.

<input name="form1.xxx">
<input name="form2.xxx">

Then, in C# you could create your object

class Form1 {
    xxx: string
}

class Form2 {
    xxx: string
}

class Combined {
  form1: Form1,
  form2: Form2
}

Access it with: Combined.form1.xxx