html, javascript - open a new tab every time a form gets submitted using Post method-CodePudding

I have an html form with a select field where user selects which table we'll show him/her from the mySql database.

<form action = "tableOutput.php" method="post" name="frmTableSelect" target="_blank"> 
        <p>Select a table from the list</p>
        <select name="tableName" autofocus>
    <!-- here I load a list of tables from mySql. for simplicity let it be: -->
            <option>table 1</option>
        <option>table 2</option>
         <p><br><input name="submit" type="submit" id="knopka" value="show table"></p>
     </form>

Like this, when user hits the button, a new tab opens up where the selected table gets printed (I process it in "tableOutput.php") - this is fine.

But the user needs to return to the first form and select another table, that should be printed in another tab, whereas it gets printed in the same tab as the first one replacing it. In other words, we need to be able to open many new tabs with output.

I inserted this javascript:

    <script>
      knopka.onclick = function() { 
        window.open("tableOutput.php")
      };
    </script>

Now a tab gets open every time one hits the button, but the POST method in "tableOutput.php" does not work anymore, so we get an error while processing the query.

If I write

<script>
  knopka.submit = function() {   
    alert('inside javascript'); 
    window.open("tableOutput.php")
  };
</script>

nothing happens, even the alert does not get executed.

Please help.

CodePudding user response：

I am surprised the _blank reuses the same new tab

You cannot use window.open to post to a new window/tab without a lot of code.

Try this:

let cnt = 0;
document.querySelector("[name=frmTableSelect]").addEventListener("submit", function() {
  this.target=`win${cnt  }`;
})

CodePudding user response：

Change .submit to .onclick:

document.getElementById('knopka').onclick = function() { alert('inside javascript'); window.open("tableOutput.php") };