Sending javascript dynamic DOM input through $_Post doesn't work in Firefox/Chrome_问答_开发者

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.

Following is the code:

<html>
<head>
</head&g开发者_运维知识库t;
<body>
    <SCRIPT language="javascript">
            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<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<=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]');
                }
            }
        </SCRIPT>

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

And the following is the script.php:

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

?>

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.

Can anyone please help me?. I am new to javascript.

Thanks alot.

IE is well known for offering it's own "flavour" of javascript - I highly recommend that you try using a javascript library such as JQuery, it abstracts away a lot of the browser-specific problems and lets you get on with what you really want to do.

Your problem is most likely related to differences in JavaScript implementation.

Perhaps in firefox you could have a look with firebug to see what exactly happens to the real-time sourcecode? that way you'll know what goas wrong and which part of the javascript might need some modifications to get it cross-browser compatible.

Finally solved it, it was due to a DIV that was inside the FORM tag. During insertion of rows, the new rows went out of the FORM tag and were never submitted. Wonder what's causing this is FIREFOX

<script language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = 2;
        var cell = row.insertCell(0);
        var cell1=row.insertCell(1);
        cell.innerHTML+='<input type="text" name="items[][TestCaseId]"  \>';
        cell1.innerHTML+='<input type="text"  name="items[][Requirement]"  \>';
    }
    function deleteRow(tabid) {
        try {
            var table = document.getElementById(tabid);
            var rowCount = table.rows.length;
            table.deleteRow(rowCount-1);
            rowCount--;
        }catch(e) {
            alert(e);
        }
    }    
</script>

<form name="form1" method="post" action="script.php">
    <table>
        <tr>
            <td><br>Traceability Matrix: </td>
            <td>
                <br>
                <table border="1" id="tabid" name="tabid">
                    <th>TestCaseId</th>
                    <th>Requirement</th>
                    <tr>
                        <td><input type="text" name="items[][TestCaseId]" id="items[][TestCaseId]" ></td>
                        <td><input type="text" name="items[][Requirement]" id="tb2" ></td>       
                    </tr>
                </table>

        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="Add Row" onClick="addRow('tabid')">
            <input type="button" value="Delete Row" onClick="deleteRow('tabid')"></td>
        </tr>
    </table>
<input type="submit" value="submit">