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

【问题标题】：Sending javascript dynamic DOM input through $_Post doesn't work in Firefox/Chrome通过 $_Post 发送 javascript 动态 DOM 输入在 Firefox/Chrome 中不起作用
【发布时间】：2011-05-09 07:24:34
【问题描述】：

我有一个使用 javascript 动态添加新行的表单。表单输入名称是一个数组“项目”。表单使用 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 新手。

非常感谢。

【问题讨论】：

标签： php javascript

【解决方案1】：

IE 以提供它自己的 javascript“风味”而闻名 - 我强烈建议您尝试使用诸如 JQuery 之类的 javascript 库，它可以抽象出许多特定于浏览器的问题，让您继续使用你真正想做的事。

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

【讨论】：

【解决方案2】：

也许在 firefox 中，您可以使用 firebug 查看实时源代码到底发生了什么？这样你就会知道哪里出了问题以及 javascript 的哪一部分可能需要一些修改才能使其跨浏览器兼容。

【讨论】：

【解决方案3】：

终于解决了，这是由于 FORM 标签内有一个 DIV。在插入行期间，新行超出了 FORM 标记并且从未提交过。不知道是什么原因导致这是 FIREFOX

【讨论】：

【解决方案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">

【讨论】：