In HTML/JavaScript how do I submit multiple posts from one button, leading a to a new page being opened on a new tab

Question

How do I submit open multiple pages via a a post request from a single form/button

Currently I have a table with each row representing a song artist and a song and on each row there is an Unlink button that uses a form to submit a post action to a server which results in a new page being opened on a new tab, and this works fine

<form target="_blank" action="https://acoustid.org/edit/toggle-track-mbid" method="POST">
  <input name="state" value="1" hidden="">
  <input name="track_id" value="9509889" hidden="">
  <input name="mbid" value="6573f01d-0df5-442d-90c3-a69783c217c3" hidden="">
  <input type="submit" value="Unlink">
</form>

What I want to be able to do is also have a an Unlink All by Artist button that will find all rows with the same artist as the row clicked on and then submit a post request for each.

So I can find the rows okay using getElementsByName() , my difficulty is I don't understand only to submit multiple posts, with each post resulting a new page being opened in a new tab.

I'm assuming my JavaScript for the UnlinklllByArtist would find the required rows, and then for each row call another JavaScript function to submit the post but how do I do this second part.

Answer 1

You can trigger multiple button clicks / submits with one button click, but my browsers initially won't allow a website to open multiple tabs. I get a message, that tabs / popups were blocked. I have the option to allow this action.

document.querySelector('button').addEventListener('click', () => {
  const forms = document.querySelectorAll('form');
  forms[0].submit();
  forms[1].submit();
});

<form target="_blank" action="https://acoustid.org/edit/toggle-track-mbid" method="POST">
  <input name="state" value="1" hidden="">
  <input name="track_id" value="9509889" hidden="">
  <input name="mbid" value="6573f01d-0df5-442d-90c3-a69783c217c3" hidden="">
  <input type="submit" value="Unlink">
</form>
<form target="_blank" action="https://acoustid.org/edit/toggle-track-mbid" method="POST">
  <input name="state" value="1" hidden="">
  <input name="track_id" value="9509889" hidden="">
  <input name="mbid" value="6573f01d-0df5-442d-90c3-a69783c217c3" hidden="">
  <input type="submit" value="Unlink">
</form>
<button>
  Unlink All
</button>