Question

我有一个使用javascript动态添加新行的表单。表单输入名称是数组“items”。表单使用POST方法将变量发送到php脚本，但在php脚本中，只接收表单中的第一行输入。这种情况发生在Firefox / Chrome中，但在IE6中，变量按照我的预期发送。

以下是代码：

<html>
<head>
</head>
<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>

以下是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.

?>

现在的问题是，在Firefox或Chrome中，如果我在表单中添加多行并提交表单，则只会将第一行数据插入到数据库中。但是，在IE中，所有行都被插入。

任何人都可以帮助我吗？我是javascript的新手。

非常感谢。

Answer 1

IE是众所周知的提供它自己的javascript风格 - 我强烈建议你尝试使用javascript库，如JQuery，它抽象出很多浏览器特定的问题，让你得到你想要做什么。

您的问题很可能与JavaScript实施的差异有关。

Answer 2

也许在firefox中你可以看一下firebug看看实时源代码究竟发生了什么？这样你就会知道什么是错误的，javascript的哪个部分可能需要进行一些修改才能使它跨浏览器兼容。

Answer 3

最后解决了它，这是由于FORM标签内的DIV。在插入行期间，新行超出了FORM标记，并且从未提交过。不知道造成这种情况的原因是FIREFOX

Answer 4

<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">

通过$ _Post发送javascript动态DOM输入在Firefox / Chrome中不起作用

4 个答案: