如何使用javascript动态命名表单元素

Question

I'm scripting an html form inside a PHP. The form is shown as a table. Every row is a 'set' of passed items that will be gathered in a $_POST double array where the first id is the table ROW, and the second identifier is the COLUMNS, actually the variables of the form.

Here is an example.

<?php
echo '<form><table>';
for ($i=1;$i<10;$i++){
echo '
   <tr>
       <td><input type="text" name="data[',$i,'][element1]></td>
       <td><input type="text" name="data[',$i,'][element2]></td>
       <td><input type="text" name="data[',$i,'][element3]></td>
       ...
       <td><input type="text" name="data[',$i,'][elementN]></td>
   </tr>';
}
echo '</table></form>';
?>

The "gathering" part of the script simply is:

$myFormInformation = $_REQUEST['data'];

and shows the content like this:

data[1][element1] = element 1-1
data[1][element2] = element 1-2
...
data[1][elementN] = element 1-N
..
data[2][element1] = element 2-1
...
data[2][elementN] = element 2-N
... ... ... 
data[10][elementN] = element 10-N

I rendered the idea...and it perfectly works. However I don't want to have all teh 10 rows shown for input, but, instead, grant the user to add rows if needed.

I found this javascript snippet to add rows, however the problem is that I don't know how to pass the ROW ID dynamically to allow my $_REQUEST part of code to work. At this moment in fact the $_REQUEST gets only one row.

<SCRIPT language="javascript">
    function addRow() {
        var referenceNodes = document.getElementById("flightsTable").getElementsByTagName("tr");
            //-2 because last row is button row
            var referenceNode = referenceNodes[referenceNodes.length - 1];
            var newNode = referenceNode.cloneNode(true);
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }
        document.getElementById("addNewRow").onclick = addRow;
</script>

obviously there is a button with id=addNewRow to launch the javascript.

How can I pass a "counter" from the javascript to the forms element in order to have each new row increase it's name="data[i][elementX]".

I can accept other ways to do the job done, if easier...

thanks!

Answer 1

You can loop the td elements and then find the input. Setting the name attribute as you please.

Something like this:

function addRow() {
    var referenceNodes = document.getElementById("flightsTable").getElementsByTagName("tr");
    //-2 because last row is button row
    var referenceNode = referenceNodes[referenceNodes.length - 1];
    var newNode = referenceNode.cloneNode(true);

    // get the next count for the new row.
    var dataCount = referenceNodes.length + 1;

    // loop the cells.
    var cells = newNode.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];

        // get the input (assuming only one).
        var input = cell.getElementsByTagName("input")[0];

        // set the name property.
        input.name = "data['" + dataCount + "'][element" + (i + 1) + "]";
    }

    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Here is a working example