Why my input value does not appear PHP HTML-CodePudding

So, i'm doing a school work where i have to make a calculator with max 10 inputs, there's a button where i can add more inputs, but for some reasons when i submit the values it does not work, it only shows the first 2 inputs that are estatic in the page.

i think the problem is related to the names, but can't find it

here's what i'm doing right now:

<body>
<table id="table">
    
    
    <tr id="adicionarcells">
        <form id="form1" name="form1" action="romanos.php" method="post">
        <td></td>
            <td>
               
                <input type="text" id="valor1" name="valor1" pattern="(^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$)" required>
                <select id="operador1" name="operador1">
                    <option value="value1" selected> </option>
                    <option value="value2">-</option>
                    <option value="value3">*</option>
                    <option value="value4">/</option>
                </select>
            </td>
            <td>
                <input type="text" id="valor2" name="valor2" pattern="(^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$)" required>
            </td>
            <td></td>
            <td>
                <input type="button" id="adiciona" value=" " style="width: 20px;" onclick="myFunction();">
                <input type="submit" value="=" style="width: 20px;">
            </td>
        </form>
        </tr>

    </table>
    <!-- <button type="button" id="button1" onclick="valida();">Enviar</button> -->
<!-- <div id="mensagem" align="center"
    style="position:fixed; top:20px; left:10%; width:80%; padding:5px 5px 5px 5px; display:none;"></div> -->

function myFunction() {
    var table = document.getElementById("table");
    var rowCount = table.rows[0].cells.length;
    var row = document.getElementById("adicionarcells");
    var x = row.insertCell(-1);
    i  
    console.log(rowCount);
    x.innerHTML = "<input type=\"text\" id=\"valor"   rowCount   "\" name=\"valor"   rowCount   "\" pattern=\"(^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$)\" required><select id=\"operador"   rowCount  "\" name=\"operador"   rowCount   "\"><option value =\"value1\" selected > </option ><option value =\"value2\">-</option><option value =\"value3\">*</option><option value =\"value4\">/</option></select>";
    if (rowCount == 11) {
        document.getElementById("adiciona").disabled = true;
    }
}

obs: it does add the inputs, but the values does not appear in my php

CodePudding user response：

You need to put the form around the entire table, not the cells of the row.

<form id="form1" name="form1" action="romanos.php" method="post">
  <table id="table">
    <tr id="adicionarcells">
      <td></td>
      <td>
        <input type="text" id="valor1" name="valor1" pattern="(^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$)" required>
        <select id="operador1" name="operador1">
          <option value="value1" selected> </option>
          <option value="value2">-</option>
          <option value="value3">*</option>
          <option value="value4">/</option>
        </select>
      </td>
      <td>
        <input type="text" id="valor2" name="valor2" pattern="(^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$)" required>
      </td>
      <td></td>
      <td>
        <input type="button" id="adiciona" value=" " style="width: 20px;" onclick="myFunction();">
        <input type="submit" value="=" style="width: 20px;">
      </td>
    </tr>
  </table>
</form>