Dynamic form not posting new elements

Question

I'm trying to adapt an static existing form that is inside of a table, to be dynamic in certain cases depending on "select".

What I've done is create new TR's TD's on the existing table id -> "peticionobras" and fill them using innerHtml with the new input text I need. Everything in plain javascript as follows:

//if select is...

if (value == "A" || value == "B" || value == "C"){

            var tableObras = document.getElementById("peticionobras");
            if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
                var row = tableObras.insertRow(5);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
                cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'>&nbsp;&nbsp;<br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
                document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);

                var row = tableObras.insertRow(6);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
                cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'>&nbsp;&nbsp;<bdi id='D_Emp_con_necesidad_tag'></bdi>";
                document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);

                var row = tableObras.insertRow(9);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
                cell1.id = "testtdtd";
                cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'>&nbsp;&nbsp;<bdi id='Direccion_coordenadas_tag'></bdi>";
                document.getElementById("Direccion_coordenadas").setAttribute("required", true);

            }
        }

The result in terms of aspect is fine, it puts what I need where it should be. But the behaviour is not correct. The new required field they don't appear as required, and once you submit the form the new inputs are not submitted

(Notice: Undefined index: D_Emp_con_necesidad in...).

The main page code is schematically as follows:

<table id="peticionobras">
    <tbody>
    <form action="./test.php" method="POST">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>2</td></tr>
    <tr><td>4</td><td>2</td></tr>
    <tr><td>6</td><td>2</td></tr>
    <tr><td>7</td><td>2</td></tr>
    <tr><td>8</td><td>2</td></tr>
    <tr><td>9</td><td>2</td></tr>
    <tr><td>10</td><td>2</td></tr>
    <tr><td><button type="submit" value="submit">Submit</button></td><td>2</td></tr>
    </form>
    </tbody>
</table>

I think the way I implemented it is too much straigthforward. Any suggestion in how to add new inputs in the existing form id='obras' inside the table id='peticionobras' in the positions 5, 6 and 9 or any clue to follow, it would be highly appreciatted.

Thanks Regards

Answer 1

*EDITED [as @QUENTIN explained in the following question: Form inside a table --A form is not allowed to be a child element of a table, tbody or tr--

<form action="./test.php" method="POST">
<table id="peticionobras">
    <tbody>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>2</td></tr>
    <tr><td>4</td><td>2</td></tr>
    <tr><td>6</td><td>2</td></tr>
    <tr><td>7</td><td>2</td></tr>
    <tr><td>8</td><td>2</td></tr>
    <tr><td>9</td><td>2</td></tr>
    <tr><td>10</td><td>2</td></tr>
    </tbody>
</table>

<button type="submit" value="submit">
    Submit
</button>
</form>
<script>
var value  = 'A';
if (value == "A" || value == "B" || value == "C"){
        var tableObras = document.getElementById("peticionobras");
        if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
            var row = tableObras.insertRow(5);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
            cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'>&nbsp;&nbsp;<br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
            document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);

            var row = tableObras.insertRow(6);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
            cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'>&nbsp;&nbsp;<bdi id='D_Emp_con_necesidad_tag'></bdi>";
            document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);

            var row = tableObras.insertRow(9);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
            cell1.id = "testtdtd";
            cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'>&nbsp;&nbsp;<bdi id='Direccion_coordenadas_tag'></bdi>";
            document.getElementById("Direccion_coordenadas").setAttribute("required", true);

        }
    }
</script>