Sending javascript dynamic DOM input through $_Post doesn't work in Firefox/Chrome
<p>I have a form that uses javascript to dynamically add new rows. The form input names is an array "items". The form uses POST method to send the variables to a php script, but in the php script, only the first row input from the form is received. This happens in Firefox/Chrome, but in IE6, the variables are sent as I expected.</p>

<p>Following is the code: </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;SCRIPT language="javascript"&gt;
            function addRow(tableID) {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);

                var colCount = table.rows[1].cells.length;

                for(var i=0; i&lt;colCount; i++) {

                    var newcell = row.insertCell(i);

                    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "laro";
                                //newcell.childNodes[0].name = "Hello";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select":
                                newcell.childNodes[0].selectedIndex = 2;
                                break;
                    }
                }
                var newRowCount = table.rows.length;
                for(var i=1; i&lt;=newRowCount; i++){
                    table.rows[i].cells[1].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][product_id]');
                    table.rows[i].cells[2].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][serial]');
                    table.rows[i].cells[3].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][product_remarks]');
                }
            }
        &lt;/SCRIPT&gt;

&lt;form action="script.php" method="action"&gt;
&lt;table&gt;
&lt;th&gt;Product ID&lt;/th&gt;&lt;th&gt;Serial No.&lt;/th&gt;&lt;th&gt;Remarks&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="items[][product_id]"&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="items[][serial]"&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="items[]['product_remarks']"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;input type="submit" name="submit" value="Add Product"&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And the following is the script.php:</p>

<pre><code>&lt;?php
$items = $_POST['items'];
foreach($items as $item)
{
$new_item = array(
'product_id' =&gt; $item['product_id'],
'serial' =&gt; $item['serial'],
'product_remarks' =&gt; $item['product_remarks']
);
$this-&gt;db-&gt;addProduct($new_item); //This is a function that adds the records(array) to database.

?&gt;
</code></pre>

<p>Now the problem is, in Firefox or Chrome, if i add multiple rows in the forms and submit the form, only the first row data is inserted into the database. But, in IE, all rows are inserted.</p>

<p>Can anyone please help me?. I am new to javascript.</p>

<p>Thanks alot.</p>
